如何在组件中再建立一个组件,并使用父组件中的数据
<body>
<div id="app">
<hello :reader="new_msg"></hello>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
new_msg: "我是实例中的数据信息"
},
components: {
"hello": {
data() {
return {
msg: "我是组件中的数据信息"
}
},
template:`
<h1>我在组件中只读取我组件中的数据,所以{{ msg }} -- {{ reader }}
//②将子组件的标签写在父模板里面,并在标签内用定义的变量将父组件的数据关联
再将g绑定在子组件的标签上,值以父组件读取的实例数据的变量为中间值进行传递
<world :child_reader="msg" :g="reader"></world>
</h1>
`,
props: ["reader"],
//在组建中再建立一个组件,他仍然拥有组件的所有特征
components: {
"world": {
data(){
return {
child_msg: "我是组件中的子组件"
}
},
template: `
<h3>如果不传参的话,我也只能读我自己的数据{{ child_msg }},
//此处就可以成功的接收到父组件的数据并使用,g就可以读取到实例中的数据
<span style="color: red">读取到父组件的数据:{{ child_reader }}</span> {{ g }}
</h3>
`,
①定义一个传带的变量, 可再定义一个g来读取实例中的数据
props: ["child_reader","g"]
}
}
},
}
})
</script>
</body>