javascript-你能帮我修复vue中的道具吗？
我最近开始使用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']
但是当代码 2 中的道具如上所示（Header.vue）时，我得到了第二张图片。为什么？
