组件通信-父传子 

<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>

 

posted @ 2020-05-17 00:28  南啾  阅读(152)  评论(0)    收藏  举报