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
}
});
~~~
注意，当构建一个组件时，其模板中必须包含一个根元素，之前的示例都只有一个元素。如果有多个元素，那么就得像下面这样用一个元素（\）包裹其它元素（\
和\