1.定义
组件的定义:实现应用中局部功能代码和资源的集合
非单文件组件:一个文件中包含n个组件
单文件组件:一个文件中只包含1个组件
2.使用
1.创建组件的基本格式
创建组件的基本格式:使用Vue.extend创建组件实例,并在父级实例中注册该组件
组件的基本格式:与vm实例类似,但是不能有el,并且data只能是一个函数
const component = Vue.extend({
template:`xxx`//模板内为html代码,使用时会将模板渲染到页面
data(){
//data必须是一个函数,这样才能保证每次使用该组件时获取的数据都是data中的原数据,否则当我们在一个页面中修改了data中的数据时,其他使用了该组件的页面中的数据也会相应改变,会造成数据混乱
return{
}
},
//vm实例中的功能与组件基本都相同
methods:{
}
....
})
1.为什么data必须是一个函数?
data必须是一个函数,这样才能保证每次使用该组件时获取的数据都是data中的原数据,否则当我们在一个页面中修改了data中的数据时,其他使用了该组件的页面中的数据也会相应改变,会造成数据混乱
假设我们定义x为一个对象,并且定义x1=x,x2=x,当我们修改x1中的a的值为100时,会发现x中的a也变成100了,x2中的a也变成100了,这显然会造成数据的混乱
let x = {a:1,b:2}
let x1 = x
let x2= x
当我们将data定义为函数,我们修改x1和x2的值都不会对x造成影响
x、x1、x2的关系就是
x:定义的一个组件 身份证原件
x1:页面一使用该组件,需要使x1=new x() 身份证复印件1
x2:页面二使用该组件,需要使x2=new x() 身份证复印件2
无论身份证复印件怎么修改都不会对身份证原件造成影响,并且我下次再次打印身份证复印件3时,数据仍与原件保持一致
function x(){
return{
a:1,
b:2
}
}
let x1 = new x()
let x2= new x()
2.注册和使用属性
例如我们创建一个名为school的组件,他有有模板,数据等等属性,
并且我们需要在它的父级实例中注册,也就是下方代码中的vm中的components
格式为
components:{
属性名:属性创建时的名字
}
注意我们注册时定义的属性名是我们最终在模板中引用的名字,如以下代码,我们在模板中引用的属性名是xuexiao而不是school,school只是作为一个中间变量
<div id="app">
<xuexiao></xuexiao>
</div>
const school = Vue.extend({
template:'<h1>{{name}}</h1>',
data(){
return{
name:'北京大学'
}
}
})
const vm =new Vue({
el:'#app',
data:{
},
components:{
xuexiao:school
}
})
最终呈现在页面是这样的
3.创建属性需要注意的几个地方
2.组件的嵌套
组件的嵌套就是在一个组件中添加新的组件,并且可以一直套娃(doge)
如下所示,我们在vm中创建了组件school,又在组件school中创建了组件student,
我们需要在school组件中注册student并且在它的模板中引用student组件,而不能跳过school组件直接在vm中引用该组件
const student =Vue.extend({
template:`
<h1>{{name}}</h1>`,
data(){
return{
name:'张三'
}
}
})
const school = Vue.extend({
template:`
<div>
<h1>{{name}}</h1>
<student></student>
</div>
`,
data(){
return{
name:'北京大学'
}
},
components:{
student:student
}
})
const vm =new Vue({
el:'#app',
data:{
},
components:{
school:school
}
})
3.VueComponent构造函数
以之前写的school组件为例
1.school组件本质是一个名为VueComponent的构造函数,且它是Vue.extend生成的
2.我们只需要写或者,Vue解析时会帮我构建school组建的实例对象,即Vue帮我们执行的:new VueComponent(options)
3.每次调用Vue.extend,返回的都是一个全新的VueComponent
4.关于this指向:
(1).组件配置中:data函数、methods中的函数watch中的函数,computed中的函数 他们的this均是 【VueCompinent实例对象】
(2).new Vue()配置中:
data函数、methods中的函数watch中的函数,computed中的函数 它们的this均是【Vue实例对象】
5.VueComponent实例对象简称组件实例对象,Vue的实例对象,简称vm