组件
:
组件是拥有一定功能多个html标签的集合体,是对html标签的封装。
好处
:
模板中为了实现一个(例如分页)效果,需要绘制20个html标签,如果使用组件,就设置一个标签就可以了,明显提升开发效率。
组件关键字:components、component
声明私有组件语法
:
new Vue({
components:{
'组件的名称': { 配置对象成员 },
'组件的名称': { 配置对象成员 }...
},
})
注意
:
使用组件语法
:
<组件名称>组件名称>
组件形式上就是html标签。组件的名字被当做html标签使用。
案例应用
:
制作一个分页组件并使用。
<div id="app">
<h2>组件应用h2>
<com-page>com-page>
div>
<script src="./vue.js">script>
<script>
var vm = new Vue({
el:'#app',
// 注册私有组件
components:{
'com-page':{
// template: 设定当前组件拥有的html标签
template:`
- 1
- 2
- 3
`
}
},
});
script>
声明全局组件语法
:
Vue.component(名称,{配置对象成员})
new Vue()
注意
:
全局组件需要在new Vue之前设置。
组件是特殊的Vue实例,与Vue实例拥有着基本相同的成员,例如 data、methods、filters、directives(自定义组件)、created等等成员在组件内部都可以设置。
注意
:
组件data成员 与 Vue实例的不一样,需要通过 function/return 设置,具体要返回一个{}对象。
案例应用
:
给分页组件设置单击事件、data成员、created生命周期方法并执行:
<div id="app">
<h2>组件应用-其他成员h2>
<com-page>com-page>
div>
<script src="./vue.js">script>
<script>
var vm = new Vue({
el:'#app',
// 注册私有组件
components:{
'com-page':{
template:`
- {{ prev }}
- 1
- 2
- 3
- {{ next }}
`,
created(){
console.log('created已经执行了')
},
methods:{
xia(){
console.log('进入下一页')
}
},
data:function(){
return {
prev:'上一页',
next:'下一页',
}
}
}
},
});
script>
组件中声明的data成员,值需要是一个function,内部通过return返回{}对象供使用,这个特性必须遵守。
为什么组件的data必须是一个function
:
组件根据业务需要,可以被使用多次,function会使得每次组件使用的时候都亲自执行并给当前应用分配一个独立的数据对象,这样多个组件的data数据是独立的,互相没有关联、牵扯,互相不会覆盖。
相反,如果直接通过{}对象给data赋值,多次使用组件会造成所有组件的data都是共享的,就是一份数据,一个组件修改data后,其他组件都受到影响,这与业务逻辑是相违背的。
组件 与 Vue实例异同
: