vue学习-13-组件的嵌套

vue学习-13-组件的嵌套

组件的嵌套

组件和组件之间可以嵌套，形成一种父子关系的组件，先创建两个父组件；

//1 号父组件
Vue.component('html-a', {
    data() {
        return {
            message : 'Hello, 父组件 1 号！'
        }
    },
    template : `<div>{{message}}</div>`
});
//2 号父组件
Vue.component('html-b', {
    data() {
        return {
            message : 'Hello, 父组件 2 号！'
        }
    },
    template : `<div>{{message}}</div>`
});

2. Vue.Compoonet 第二参数其实就是 Vue 构造子集，可以继续嵌套；
3. 可以直接在内部传入对象，或外部声明后，将对象传入均可；

Vue.component('html-a', {
    data() {
        return {
            message : 'Hello, 父组件 1 号！'
        }
    },
    template : `
        <div>
            <div>{{message}}</div>
            <html-a-child></html-a-child>
        </div>
    `,
    components: {
        'html-a-child' : {
            data() {
                return {
                    message : 'Hell，子组件 1 号！'
                }
            },
            template : `<div>{{message}}</div> `,
        },
    }
});

4. 也可以创建一个独立的子组件，用于直接传入其它父组件；

//独立子组件
const childComponent = {
    data() {
        return {
            message : '独立子组件'
        }
    },
    template : `<div>{{message}}</div>`,
};
Vue.component('html-a', {
        data() {
            return {
                message : '1号父组件'
            }
        },
        template : `
            <div>
                <div>{{message}}</div>
                <html-child></html-child>
            </div>
        `,
        components : {
            'html-child' : childComponent
        }
    });