Vue 关于组件的嵌套,用实例讲解教你如何嵌套

Vue嵌套，关于嵌套就是将一个组件嵌套到另一个组件中，那么外部的组件就是父组件，内部的组件就是子组件，我们就可以通过父组件来控制子组件。

将组件嵌套使用，方便开发者对组件的管理，及使用。

那么在将组件的嵌套前我们先来讲一些关于使用组件的注意点：

1.关于组件名：

            一个单词组成：
       
                第一种写法（首字母小写）：school
                
                第二种写法（首字母大写）：School
                
            多个单词组成：
            
                第一种写法（kebab-case命名）：my-school
                
                第二种写法（CamelCase命名）：MySchool（需要Vue脚手架支持）
                
            备注：
                1.组件名尽可能回避HTML中已有的元素名称、例如：h2，H2都不行
                2.可以使用name配置项指定组件开发者工具中呈现的名字。

2.关于组件标签

            第一种：<school></school>
            第二种：<school/>
            备注：不用使用脚手架时，<school>会导致后续组件不能渲染。

3.一个简写方式：

            const school = Vue.extend(options) 可简写为：const school = options（配置对象）

组件的嵌套

既然是组件嵌套那么我们就先来创建组件。

1.创建student组件

    const student = Vue.extend({
        template:`
        <div>
            <h2>学生名字：{{studentName}}</h2>
            <h2>学生地址：{{StudentAddress}}</h2>
        </div>
        `,
        data() {
            return {
                studentName:'李四',
                StudentAddress:'北京'
            }
        }
    })

接下来我们再创建一个组件来作为student组件的父组件

2.创建school组件

const school = Vue.extend({
        template:`
        <div>
            <h2>学校名字：{{schoolName}}</h2>
            <h2>学校地址：{{address}}</h2>
            <student/>
        </div>
        `,
        data() {
            return {
                schoolName:'清华大学',
                address:'北京'
            }
        }

以上我们创建的两个组件，这样我们就可以演示组件嵌套。接下来我们需要将student组件嵌套到school组件，作为school组件的子组件。

如下： 我们都知道创建完组件后需要注册组件，那么我们只需要将student组件注册到school组件中。

components:{
            student
        }

我们直接在school组件的data（）函数后面写入如下代码就可以将student组件嵌套进school组件中。我们在Vue开发者工具中看看效果：

从图片可以看出Student组件在School内部，这样就完成了组件的嵌套。

当然组件嵌套时我们需要注意的是，子组件需要提前在父组件创建前创建，不然无效，浏览器会报错。

嵌套完之后就是使用，因为student组件在school组件中，所以我们只需要注册school组件就可以。注册完school组件后，在使用组件时直接写入school组件标签就可以。

例如：

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

就可以得到上面的效果。