4、组件
最后更新于:2022-04-02 06:09:25
组件是可复用的Vue实例,拥有属于自己的数据、模板、脚本和样式,可避免繁重的重复性开发。由于组件都是独立的,因此其内部代码不会影响其它组件,但可以包含其它组件,并且相互之间还能通信。
## 一、注册
在使用组件之前,需要先将其注册,Vue提供了两种注册方式:全局注册和局部注册。
**1)全局注册**
通过Vue.component()方法可注册全局的组件,它能接收两个参数,第一个是组件名称,第二个既可以是扩展过的构造器(即Vue.extend()的返回值),也可以是选项对象(会自动调用Vue.extend()),如下所示。
~~~js
Vue.component("btn-custom", Vue.extend({ })); //扩展过的构造器
Vue.component("btn-custom", { }); //选项对象
~~~
组件的选项对象也会包含data、methods、计算属性和生命周期钩子等成员,但不包含挂载目标el选项,并且data选项也不再是一个对象而是一个函数,因为只有这样才能让每个实例维护各自的数据对象,互不影响。注意,只有在组件注册之后才能将其应用于其它Vue根实例的模板中,如下所示。
~~~html
~~~
渲染出的DOM结构如下所示。
~~~html
~~~
组件的命名方式除了上面的连字符分隔式之外,还有另一种大驼峰式(例如BtnCustom)。当把组件引用至字符串模板中时,两种命名方式都是有效的;而当把组件直接应用到DOM模板中时(如下所示),就不能用大驼峰命名,因为标签会被自动转换成小写(即\
),于是就找不到这个组件的定义,进而抛出错误。
~~~html
~~~
**2)局部注册**
Vue的局部注册需要分两步,首先通过创建选项对象的方式来定义组件,如下所示。
~~~js
var BtnCustom = {
data: function() {
return {
txt: "提交"
};
},
template: ""
};
~~~
然后在Vue根实例的components选项中注册要使用的组件(如下所示),其中属性名就是模板中要使用的自定义元素名,属性值就是组件。
~~~js
var vm = new Vue({
el: "#container",
components: {
"btn-custom": BtnCustom
}
});
~~~
注意,当构建一个组件时,其模板中必须包含一个根元素,之前的示例都只有一个元素。如果有多个元素,那么就得像下面这样用一个元素(\)包裹其它元素(\
和\
';