你能帮我修复 vue 中的 props 吗？

如何解决你能帮我修复 vue 中的 props 吗？

最近开始用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）时，我得到了第二张图片。为什么？

解决方法

在 Vue 中定义 prop 的各种方法，这应该会有所帮助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: '' },...}

,

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