[英]Vue props undefined when passing from parent component to child component
将两个数据成员从我父母的数据方法传递到子组件的道具时遇到问题。 基本上,我在父组件中设置数据值,将它们绑定到 HTML 模板中的子组件调用。 然后我试图在孩子的“道具”中引用这个传递的数据。
但我一直在我的 Vue 开发工具中得到这个:
props
date: undefined
title: undefined
这是我的代码:
App.vue (仅供参考。我不希望我的问题出在此代码上)
<template>
<div id="app">
<div id="nav">
<Header />
</div>
</div>
</template>
<script>
import Header from '@/components/Header.vue'
export default {
components: {
Header
}
}
</script>
Home.vue (父组件)
<template>
<div>
<Header :title="title" :date="date" />
</div>
</template>
<script>
// @ is an alias to /src
import Header from "@/components/Header.vue";
import moment from "moment";
export default {
data () {
return {
title: "SOME NEWS",
date: moment().format("dddd, MMMM D, YYYY")
}
},
components: {
Header
}
};
</script>
Header.vue (子组件)
<template>
<div class="hello">
<h1>{{ getTitle() }}</h1>
<h3>{{ getDate() }}</h3>
</div>
</template>
<script>
export default {
props: {
title: {
type: String,
required: true
},
date: {
type: String,
required: true
}
},
method: {
getTitle() {
return this.title
},
getDate() {
return this.date
}
}
};
</script>
如果我理解您在 App 组件代码中的正确性,您应该使用<Home />
组件,但您使用<Header />
代替。 例子:
<template>
<div id="app">
<div id="nav">
<Home />
</div>
</div>
</template>
<script>
import Home from '@/components/Home.vue'
export default {
components: {
Home
}
}
</script>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.