vue(4)组件的使用

组件概念：我理解为是一个功能或模块的封装，将每个板块单独写成一部分再集合到App中，哪里需要就在哪里引入，api：一个程序到另一个程序的接口，调用

组件的使用：1.创建组件 2.注册组件 3.使用组件（组件标签，脚手架中可使用自闭和标签）

一：非单文件组件组件

即所有组件都在一个文件中

1.创建组件

const b=Vue.extend({
	template:`<div>
	<p>{{b}}</p><h6>姓名：{{name}}</h6><h6>年龄：{{age}}</h6></div>`,
    data(){
	    return{
		    b:"b组件",
			name:"wxy",
			age:21
		}
	}
})

使用Vue.extend方式，没有el容器管理，后续会统一集合到一个容器中，数据使用data(){ return{}}返回，为了避免值被修改，因此每次都会返回一个新的数据

2.注册组件

        2.1全局注册

        

Vue.component("quanju",c)

        第一个是组件名，第二个是组件对象，使用全局注册是要将它写在new Vue上面，否则其他局部注册时就找不到这个使用全局注册的组件，因为已经渲染到页面上去了，然后就不用再在components里面写入了

        2.2局部注册

        

new Vue({
		el:"#app",
		components:{
		school:a,
		msg:b
	}
})

3.使用组件，全局注册时不受el的管理，局部注册时组件在哪里注册就在哪个容器使用

二：组件嵌套

即在组件里还有个组件，在extend中新增加一个component配置项，同理引入组件

const a=Vue.extend({
			template:`<div><p>{{school}},{{adress}}</p><student>        
            </student></div>`,
				data(){
					return {
						
			}
					
		},
	components:{
			student:b
		}
	})

三：关于VueComponent

1.school组件是vue.extend自己定义的，不是程序员定义的
         2.我们只是写了组件名称，Vue解析时会自动帮我们创建VueComponent实例对象
         3.写多个组件时，每次都会创建一个新的VueComponent实例对象
         4.关于this的指向：
         （1）：在组件配置中，可以配置data,methods,watch等属性，他们的指向是vc
         （2）：在new vue配置中，this指向是vue的实例对象

其中有一条重要的关系：VueComponent.prototype.__proto__ === Vue.prototype，这样，我们定义的组件实例对象，就可以访问到 Vue 原型链上的属性、方法了，后续开发中子组件会经常使用到vm原型上的方法