你能帮我修复vue中的道具吗？

Question

我最近开始使用vue，App.vue中的代码是

在上面代码的第二行中，我传递了一个字符串，它是 hello 作为属性，它在下面的代码中被捕获 App.vue：

  <div class = "container">
    <Header title="Hello"> </Header>
  </div>
</template>

<script>

import Header from './components/Header'
export default {
  name: 'App',
  components: {
    Header,
  }
}
</script>

<style>
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400&display=swap');
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
body {
  font-family: 'Poppins', sans-serif;
}
.container {
  max-width: 500px;
  margin: 30px auto;
  overflow: auto;
  min-height: 300px;
  border: 1px solid steelblue;
  padding: 30px;
  border-radius: 5px;
}
.btn {
  display: inline-block;
  background: #000;
  color: #fff;
  border: none;
  padding: 10px 20px;
  margin: 5px;
  border-radius: 5px;
  cursor: pointer;
  text-decoration: none;
  font-size: 15px;
  font-family: inherit;
}
.btn:focus {
  outline: none;
}
.btn:active {
  transform: scale(0.98);
}
.btn-block {
  display: block;
  width: 100%;
}
</style>

Header.vue：

    <header>
        <h1>  XYZ {{ title }} </h1>
        
    </header>
</template>


<script>
    export default{
        name: "Header",
        props: {
            title: {
                type: "string"
            }
        }
    }
</script>

<style scoped>
    header{
        display: flex;
        justify-content: space-between;
        align-items: centre;

    }
</style>

通常预期的输出是

但我得到一个空白页。

当第二个代码中的props属性为props: ['title']时，我得到如图1所示的输出

但是当代码 2 中的道具如上所示（Header.vue）时，我得到了第二张图片。为什么会这样？

Answer 1

在 Vue 中定义道具的各种方法，这应该有助于https://vuejs.org/v2/api/#props

// Specify only the prop name
props: ['title', ...]

// Prop name and type in object format
props: { title: String, ... }

// Prop type with default value and other metadata
props: { title: { type: String, default: '' }, ...}

Answer 2

尝试将type: "string"改为type: String