Vue笔记-组件Component-组件通信之父子通信

父子通信

• 父级通过data传递数据
• 子级通过props接收数据
• 视图中通过v-bind绑定数据

    <div id="app">
        <!-- v-bind绑定数据 -->
        <my-com-a :chidren='parent'></my-com-a>
    </div>

 <script src="./node_modules/vue/dist/vue.js"></script>
    <script>
        Vue.component('MyComA', {
            // 通过props接收数据
            props: ['chidren'],
            template: `<div>父子通信---{{ chidren }}</div>`
        })

        new Vue({
            el: '#app',
            // 传递数据
            data: {
                parent: 'MyComA'
            }
        })
    </script>