1、效果图分析

2、先创建一个组件

    //第一步、创建city组件
        const city = Vue.extend({
            template: `
                

                     城市名称：{{cityName}}
                     城市美食：{{cityFood}}
                     点击我弹窗
                 
            
            `,
            data() {
                return {
                    cityName: "周口",
                    cityFood: "胡辣汤"
                }

            },
            methods: {
                show() {
                    alert("你好啊、Vue")
                }
            },
        })

3、新创建一个组件、嵌套已经存在的组件

==注意：注册组件的过程写在新组建中。并且在template中要使用组件才可以生效==

        //第一步创建 学校组件
        const school = Vue.extend({
            name: "myschoolOne",
            template: `
                

                     学校名称：{{schoolName}}
                     学校位置：{{schoolAddress}} 
                         
                 
            
            `,
            data() {
                return {
                    schoolName: "长沙大学",
                    schoolAddress: "湖南长沙"

                }
            },
            //2、注册组件
            components: {
                city
            }


        })

4、第四步 注册组件

     //创建Vue实例
        new Vue({
            el: '#App',
            data: {
                value: "Vue"
            },
            //第二步、注册组件（局部注册）
            components: {
                school
            }
        })

5、实现的效果

6、套娃式嵌套 代码实例

7、测试效果

8、关于VueComponent

关于VueComponent：

• 1、==school组件==本质是一个名为VueComponent的构造函数，且不是程序员定义的，是Vue.extend生成的。

• 2、我们只需要写或，Vue解析时会帮我们创建school组件的实例对象，即Vue帮我们执行的：new VueComponent(options)。

• 3.特别注意：每次调用Vue.extend，返回的都是一个全新的：VueComponent

• 4.关于this指向： (1)、组件配置中：data函数、methods中的函数、watch中的函数、computed中的函数 它们的this均是==VueComponent实例对象==。 (2)、new Vue(options)配置中：data函数、methods中的函数、watch中的函数、computed中的函数 它们的this均是==Vue实例对象==。

• 5、VueComponent的实例对象，以后简称vc（也可称之为：组件实例对象）。 Vue的实例对象，以后简称vm。

9、代码实例

    
    
    
    




    

        展示的信息:{{name}}
        请点击我Vue
        

        
        
    


    

10、实现的效果