vue——11-父子组件

版权声明：转发博客 请注明出处 否则必究 https://blog.csdn.net/lucky541788/article/details/82728769

<div id="enjoy">
    <parent></parent>
    <!--
    <my-child1></my-child1>
    会报错：因为外部拿不到子组件
    解决方法：单独子组件拿出来定义一下
    -->
    <child></child>
</div>

        {
            //1.子组件构造器
            let Child1 = Vue.extend({
                template: `<img src="../images/fashion-001.jpg" width="300">`
            });

            let Child2 = Vue.extend({
                template: `<img src="../images/fashion-002.jpg" width="300">`
            });

            //想要单独获得设置子组件
            Vue.component('child',Child1);

            //2.父组件
            Vue.component('parent', {
                //注册子组件
                components: {
                    'my-child1': Child1,
                    'my-child2': Child2
                },
                //在父组件下运行子组件
                template:`
                <div>
                <my-child1></my-child1>
                <my-child2></my-child2>
                </div>
                `
            });

            //3.关联位置
            new Vue({
                el: '#enjoy'
            })
        }