vue组件嵌套（初学者超简单，一看就懂）

一.组件的创建模板：

//第一步：创建定义组件
const 定义的组件名=Vue.extend({
    template:`
      

        组件的内容（html标签+插值语法）
      
    `，
    data(){    //必须写为data(){}函数方法格式
      组件内容中插值语法的数据
    }
})

//第二步：注册组件（分为局部注册和全局注册两种）
全局注册：
Vue.component('组件运用名', 组件定义名)
        

局部注册（要在new的vue实例中创建）：
new Vue({
    el:'',
    components:{
      组件运用名：组件定义名
    }
})


//第三步：使用组件（在html里面）例如：

        
        
        

二、组件创造实例

三、组件嵌套

想要实现如下组件嵌套：

1、首先创建四个组件：

        // 创建student组件
        const student = Vue.extend({
            template: `
            

                
学生姓名：{{name}}
                
学生年龄:{{age}}
            
            `,
            data() {
                return {
                    name: 'tom',
                    age: '20'
                }
            }
        })

        //创建school组件
        const school = Vue.extend({
            template: `
                

                    
学校名称：{{schoolname}}
                    
学校地址：{{address}}
                    
                
            `,
            data() {
                return {
                    schoolname: '河南科技学院',
                    address: '新乡市'
                }
            },
            //局部注册student
            // student在school里面嵌套,所以student组件在school组件里面的template属性里面注册
            components: {
                student: student
            }
        })


        // 创建hello组件（和school组件平级）
        const hello = Vue.extend({
            template: `
                

                    
{{msg}}
                
            `,
            data() {
                return {
                    msg: '想学好vue'
                }
            }
        })


        //创建app组件
        const app = Vue.extend({
            template: `
            

                
                
                
            `,
            components: {
                school: school,
                hello: hello
            }
        })

2、注册组件

在注册每个组件时，各个组件注册在该组件上一层级中。

（1）组件的上一层级是vm实例，因此app组件在new VUe里面注册

new Vue({
            el: '#root',
            //注册组件school（局部）
            components: {
                app: app
            }
        })

（2）和组件的上一层级是组件

 （3）组件的上一层级是

 

3、组件使用：

组件使用时，各个组件写在该组件上一层级的模板中

（1）组件的上一层级是vm实例，因此app组件在new VUe里面使用

（2）和组件的上一层级是组件

 

 （3）组件的上一层级是

 

四、该实例源码：

五、实现的效果