vue之创建父子组件

最新推荐文章于 2023-06-14 15:35:58 发布

得做有氧

最新推荐文章于 2023-06-14 15:35:58 发布

阅读量679

点赞数

CC 4.0 BY-SA版权

分类专栏： vusjs

本文链接：https://blog.csdn.net/weixin_44474200/article/details/106201318

vusjs 专栏收录该内容

15 篇文章

订阅专栏

我认为就是父子调用，如果会一门语言的话就比较好理解。
理解为作用域，父可以调用子的组件。爷爷可以调用父组件，
但是如果想要爷爷组件成功调用孙组件，必须在爷爷组件内都注册一遍。否则会报错。

<div id="app">
    <cpn2></cpn2>
    <cpn1></cpn1>
</div>
<script>

    //先创建子组件
    const cpnC1 = Vue.extend({
        template:`
            <div >
            <h2>您的爱好是:111111</h2>
            </div>
                `
    })

    //创建父组件 并且在父组件里面调用子组件展示
    const cpnC2 = Vue.extend({
        template:`
            <div >
            <h2>您的爱好是:222222</h2>
            <cpn1></cpn1>
            </div>
                `,
        components: {
            //注册子组件
            cpn1: cpnC1
        }
    })



    const app = new Vue({
        el: '#app',
        data: {
            hobbies:'Nihao ',
        },
        components: {
        //必须在这里都注册一遍否则会报错。
            cpn2:cpnC2,
            cpn1: cpnC1
        }
    })
</script>