码迷,mamicode.com
首页 > 其他好文 > 详细

组件通信-父传子

时间:2020-05-17 01:12:53      阅读:50      评论:0      收藏:0      [点我收藏+]

标签:必须   body   组件通信   返回   new   ops   code   div   使用   

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

 

组件通信-父传子

标签:必须   body   组件通信   返回   new   ops   code   div   使用   

原文地址:https://www.cnblogs.com/nanjo4373977/p/12903118.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!