报错如下：Property or method "message" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property
下面是我写的代码部分
<body>
<!-- 父组件 -->
<div id="app" >
{{message}}
<!-- 4.通过使用子组件来赋值 将data中的数据传递给props -->
<cpn :cmessage="message"></cpn>
</div>
<template id="cpn">
<div>
我是子组件
父组件内容：{{message}} <!--3.这里传入父组件的data数据-->
</div>
</template>
<script src="js/vue.js"></script>
<script>
// 子组件 子组件里面是props
const cpn = {
template:'#cpn',
// 2.使用props来声明需要从父级接受到的数据
props:['cmessage']
}
// 父组件
const app = new Vue({
el: '#app',
data: {
message: '父组件啦啦啦'
},
// 1.在父组件里面注册子组件
components:{
cpn
}
})
</script>
</body>
出现这个问题完全是由于自己的马虎，在子组件的template模板中，引用父组件的message数据应该是?<cpn :cmessage="message"></cpn>这行代码中的cmessage。通过这行代码将data中的数据传递给了props。因此将这行代码修改为：<cpn :cmessage="cmessage"></cpn>就可以运行了。
|