组件概念:我理解为是一个功能或模块的封装,将每个板块单独写成一部分再集合到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原型上的方法