1.组件之间的嵌套关系：

话不多说直接上代码：

代码解析:

<body>
    <!-- Vue模板 -->
    <div id="root"></div>
</body>

<script type="text/javascript">
    Vue.config.productionTip = false

    // 创建student组件（归属于school的子组件）
    const student = Vue.extend({
        name:'student',
        template : `
            <div>
                <h2>学生姓名:{{name}}</h2>    
                <h2>学生年龄:{{age}}</h2>  
            </div>
        `,

        data() {
            return {
                name : '张三',
                age : '20'
            }
        },
    })

    // 创建school组件
    const school = Vue.extend({
        name:'school',
        template: `
            <div>
                <h2>学校名字:{{name}}</h2>    
                <h2>学校地址:{{address}}</h2> 
                <!-- school管理下的子组件student -->   
                <student></student>  
            </div>
        `,
        
        data() {
            return {
                name : '五邑大学',
                address : '广东江门'
            }
        },

        // 注册组件(将student组件归于school管理)
        components : {
            student//简写形式
        }
    })

    // 创建hi组件
    const hi = Vue.extend({
        template:`
            <h1>Hi  {{name}}!!</h1>
        `,
        data() {
            return {
                name : 'Vue'
            }
        },
    })

    // 一人之下(vm),万人之上(管理其他组件)
    // 重要:创建组件的管理者app(常用于项目中的开发)
    const app = Vue.extend({
        name:'app',
        template : `
            <div>
                <!-- app管理下的子组件 -->
                <hi></hi>
                <school></school>    
            </div>
        `,

        // 注册组件(局部)
        components :{
            school,
            hi

        }
    })
    
    // Vue实例化对象
    new Vue({
        template:`
            <app></app>
        `,
        el:'#root',

        // 注册组件
        components:{
            app
        }

    })
</script>

运行结果展示:

2.Vuecomponent构造函数的讲解（重点）：

(1).组件的本质是一个名为VueComponent的构造函数，且不是程序员定义的，是Vue.extend生成的。
(2).我们只需要写或，Vue解析时会帮我们创建school组件的实例对象，即Vue帮我们执行的：new VueComponent(options)。
(3).特别注意：每次调用Vue.extend，返回的都是一个全新的VueComponent！！！！
(4).关于this指向：
- 1.组件配置中：
  - data函数、methods中的函数、watch中的函数、computed中的函数它们的this均是【VueComponent实例对象，理论上与vm非常的相似】。
- 2.new Vue(options)配置中：
  - data函数、methods中的函数、watch中的函数、computed中的函数它们的this均是【Vue实例对象】。
(5).VueComponent的实例对象，以后简称vc（也可称之为：组件实例对象）。
(6).vc和 vm的区别：
- 不严谨来说的话，两者是可以划等号的，因为vc有的属性，方法，vm都有而且基本是一致的，但是vm有一个el属性用于决定为那个容器服务，但是vc没有el属性（硬写会报错），可以这样认为， vc 相当于小型的 vm

代码解析:

 <!-- 准备好一个容器-->
<div id="root">
    <school></school>
    <hello></hello>
</div>

<script type="text/javascript">
    Vue.config.productionTip = false
    
    //定义school组件
    const school = Vue.extend({
        name:'school',
        template:`
            <div>
                <h2>学校名称：{{name}}</h2>  
                <h2>学校地址：{{address}}</h2>   
                <button @click="showName">点我提示this指向</button>
            </div>
        `,
        data(){
            return {
                name:'五邑大学',
                address:'江门'
            }
        },
        methods: {
            showName(){
                console.log('showName',this)
            }
        },
    })

    const test = Vue.extend({
        template:`<span>wyu</span>`
    })

    //定义hello组件
    const hello = Vue.extend({
        template:`
            <div>
                <h2>{{msg}}</h2>
                <test></test>   
            </div>
        `,
        data(){
            return {
                msg:'你好啊！'
            }
        },
        components:{test}
    })

    console.log('school === hello?',school === hello)

    //创建vm
    const vm = new Vue({
        el:'#root',
        components:{school,hello}
    })
</script>

运行结果展示:

3.一个重要的内置关系（vc与vm）

（涉及到构造函数的原型与原型链的知识，翻查以往博客复习）

(1).一个重要的内置关系：VueComponent.prototype.proto === Vue.prototype
(2).为什么要有这个关系：让组件实例对象（vc）可以访问到 Vue原型上的属性、方法。

图解如下:

代码解析:

<script type="text/javascript">
	Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
	// 我这里在Vue的原型对象上面添加x属性
	Vue.prototype.x = 99

	//定义school组件
	const school = Vue.extend({
		name:'school',
		template:`
			<div>
				<h2>学校名称：{{name}}</h2>	
				<h2>学校地址：{{address}}</h2>	
				<button @click="showX">点我输出x</button>
			</div>
		`,
		data(){
			return {
				name:'五邑大学',
				address:'广东江门'
			}
		},
		methods: {
			showX(){
				// 这里同样能输出Vue原型对象上的属性
				console.log(this.x)
				// 验证上面的:VueComponent.prototype.__proto__ === Vue.prototype是否正确
				console.log('VueComponent.prototype.__proto__ === Vue.prototype',school.prototype.__proto__ === Vue.prototype);//true
			}
		},
	})

	//创建一个vm
	const vm = new Vue({
		el:'#root',
		data:{
			msg:'你好'
		},
		components:{school}
	})
</script>