组件通信-父传子
Posted nanjo4373977
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了组件通信-父传子相关的知识，希望对你有一定的参考价值。
<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>
以上是关于组件通信-父传子的主要内容，如果未能解决你的问题，请参考以下文章