1.组件介绍
(a)扩展HTML元素;
(b)封装可复用代码片段;
(c)低耦合,组件和其他代码无冲突;
(d)修改功能时,方便快捷;
(e)便于协同开发,并行开发最后整合;
2.基本写法
步骤一:注册组件 Vue.component( 组件名称 ,配置项 );
步骤二:使用组件 <组件名称></组件名称>
3.全局组件&局部组件
全局组件:一经注册,全部实例的任意位置可用(这个用的还是少,因为毕竟消耗内存,初始化耗时间)。
局部组件:一经注册,只可在当前组件内使用(局部的话,更能知道组件的嵌套,逻辑性会好一些,易于维护)。
//全局组件注册&使用
<div id="app">
<name></name>
</div>
<script>
//全局注册:这个注册一定是在实例化之前
Vue.component('name', {
template: '<h1>自定义全局组件!</h1>'
})
new Vue({
el: '#app'
})
</script>
//局部组件注册&使用
<div id="app">
<name></name>
</div>
<script>
var Child = {
template: '<h1>自定义局部组件!</h1>'
}
new Vue({
el: '#app',
//局部注册:1.最后有个‘s’;2.标签<name> 将只在父模板可用
components: {
'name': Child
}
})
</script>
4.组件备注
(a)组件data必须是一个函数
相同组件重复使用,其每一个组件都是一个实例的创建,都有自己需要维护的作用域和执行环境,为了维护这一份被返回对象的独立拷贝,data数据层需要定义为一个函数,以支持单独管理当前实例化的组件。
data: function () {
return {
count: 0
}
}
(b)要在初始化根实例之前注册组件
(c)全局注册是component,局部注册是components。一个“s”的区别
(d)template为具体组件内容,大多时候不会直接写死,可使用ES6的import导入组件,再使用之(后边会介绍,不急不急)
(e)使用开源组件库时,切记根据说明文档做正确的配置,否则这坑不好填满