Vue2(笔记21) - 组件 - 组件的嵌套

Vue笔记-组件部分

​​Vue2(笔记19) - 组件 - 对组件的理解​​

​​Vue2(笔记20) - 组件 - Vue 非单文件组件 和 几个注意点​​

​​Vue2(笔记21) - 组件 - 组件的嵌套​​

​​Vue2(笔记22) - 组件 - VueComponent 以及 Vue 和 VueComponent 的内置关系​​

​​Vue2(笔记23) - 组件 - 单文件组件​​

组件的嵌套

官方的图中，就可以看出，组件之间是可以嵌套的；

没有嵌套的组件

为了方便，就直接把前面写好的拿来用了；

<div id="root">
    <h1>{{msg}}</h1>
    <hr>
    <school></school>
    <student></student>
</div>

提示：学校和学员是平级的组件；

// 创建学校组件
const school = Vue.extend({
    template: `
        <div>
            <h2>学校名称：{{schoolName}}</h2>
            <h2>学校地址：{{address}}</h2>
        </div>
    `,
    data() {
        return {
            schoolName: '51cto',
            address: '北京',
        }
    }
})
// 学员组件
const student = Vue.extend({
    template: `
        <div>
            <h2>学员姓名：{{studentName}}</h2>
            <h2>学员年龄：{{age}}</h2>
        </div>
    `,
    data() {
        return {
            studentName: '小明',
            age: 18
        }
    }
})

new Vue({
    el: '#root',
    components: {
        school: school,
        student: student,
    },
    data: {
        msg: '学习Vue组件'
    },
})

看下效果：

插件里，可以看出， school 和 student 也是平级的；

有嵌套的组件

把学员的组件注册在学校的组件里，就成嵌套的了；

但要注意：要把学员的组件要放在学校组件的上面；

<div id="root">
    <h1>{{msg}}</h1>
    <hr>
    <school></school>
</div>

提示：student 的模板标签要被拿走，放在 school 组件中的模板中；

// 学员组件
const student = Vue.extend({
    template: `
        <div>
            <h2>学员姓名：{{studentName}}</h2>
            <h2>学员年龄：{{age}}</h2>
        </div>
    `,
    data() {
        return {
            studentName: '小明',
            age: 18
        }
    }
})

// 学校组件
const school = Vue.extend({
    components:{   // 把学员组件，注册在了学校组件里
        student
    },
    template: `
        <div>
            <h2>学校名称：{{schoolName}}</h2>
            <h2>学校地址：{{address}}</h2>
            <hr>
            <student></student>
        </div>
    `,
    data() {
        return {
            schoolName: '51cto',
            address: '北京',
        }
    }
})

new Vue({
    el: '#root',
    components: {  // vm 中，只管理着 学校组件
        school
    },
    data: {
        msg: '学习Vue组件'
    },
})

只需改动几下位置:

先把学员的组件放在学校里注册： components:{student}

再把学校的组件放在 vm 里注册： components:{school}

然后把 vm 模板中的 <student></student> 标签，拿到学校组件中的模板中 template 中；

看下效果：

再看下结构：

代码还是要多写几遍的，自己动手写时，才会发现，好多本以为理解的东西会忘记；

比如：添加一个与 school 平级的 hello 组件，就要记得：

1）创建组件，​​Vue.extend()​​​ ，做模板，​​template:``​​​ ，做数据函数，​​data(){return msg:'欢迎'}​​

2）注册组件，写在 vm 的 ​​components:{school,hello}​​ 选项中

3）使用组件，在结构中把 <hello></hello> 标签加上；还要放在 <school/> 标签的上面；

看下结果：

这样hello 与 school 平级了；

实际开发中的嵌套

实际开发中的，vm 一般只放一个总的组件，然后把其他组件都纳入这个组件的管理；

这个组件名，通常都用 app ；再建一个新组件 app ；

一个像样的嵌套关系：

看一下代码结构：

结构中，只有一个 div ，看起来非常简洁了；

<div id="root"></div>

大部分的逻辑都放在各个组件中了，vm 也变得更简洁；