<body>
<div id="app">
<!-- 3.使用子组件 -->
<App></App>
</div>
<script>
//全局组件
//父传子：通过props进行通信
//1.在子组件中声明props接收在父组件挂载的属性
//2.可以在子组件的template中任意使用
//3.在父组件绑定自定义的属性
Vue.component('Child', {
template: `
<div>
<h3>我是一个子组件</h3>
<h4>{{childData}}</h4>
</div>
`,
props: ['childData']
})
//1.创建局部组件
//注意：在组件中这个data必须是一个函数，返回一个对象
const App = {
data() {
return {
msg: '我是父组件传进来的值'
}
},
template: `
<div>
<child :childData = 'msg'></child>
</div>
`,
computed: {
},
}
new Vue({
el: '#app',
data: {
},
components: {
//2.挂载子组件
App
}
})
</script>
</body>
组件通信-父传子
猜你喜欢
转载自www.cnblogs.com/nanjo4373977/p/12903118.html
今日推荐
周排行