父子组件

最新推荐文章于 2022-03-15 14:30:02 发布

zmj2051176726

最新推荐文章于 2022-03-15 14:30:02 发布

阅读量464

点赞数

分类专栏： vue组件

本文链接：https://blog.csdn.net/xiaoxingxingzai/article/details/100116138

版权

vue组件专栏收录该内容

7 篇文章 0 订阅

订阅专栏

父子组件

<body>
<div id="app">
    <ton></ton>
</div>
</body>
<script>
    //创建子构造器
    var child1=Vue.extend({
        template:'<h1>我是子一</h1>'
    })
    var child2=Vue.extend({
        template:'<h1>我是子二</h1>'
    })
    //创建父构造器
    var parent=Vue.extend({
        components:{
            'child-one':child1,  //注意组件名称一定要加单引号，局部注册Child组件，该组件只能在Parent组件内使用
            'child-two':child2
        },
        template:'<div><h1>我是父</h1><p><child-one></child-one></p><p><child-two></child-two></p></div>'
    })
    //注册父组件
    Vue.component('ton',parent);
    new Vue({
        el:"#app"

    });
</script>

运行结果：
在这里插入图片描述
注意事项：
1.在父组件中注册子组件，子组件只能用在父组件中