作用：提高代码复用性
使用方法：
1、全局注册
Vue.component('tag', { template: '<div>这是一个组件</div>' })
第一个参数是组件的名称，第二个参数是一个对象，是组件的模板
全局注册的优点：所有的vue实例都可以使用
全局注册的缺点：跟全局变量一样，权限太大，容错率降低
2、局部注册
let app = new Vue({
el: '#app',
data: { },
components: {
'my-component': {
template: "<h1>组件组件组件</h1>"
}
}
})
3、html标签受限，使用 is 属性
vue 组件的模板在某些情况下会受到html标签的限制，比如 <table>标签中只能有 <tr> <td> <tbody> 这些元素，所以直接在 table中使用组件是无效，会被自动提取到table 外面，此时就可以使用 is属性 来挂载组件。
例如：
<table>
<my-component></my-component>
</table>
这样写是无效的，这个组件会被提取到 table 标签外面
1.png
此时就可以使用 is 属性来挂载组件：
<table>
<tbody is="my-component"></tbody>
</table>
2.png
4、使用组件时的注意事项
-
使用 小写字母或小写字母加横线（-） 的形式命名组件
例：
components: {
'my-component': {
template: "<h1>组件组件组件</h1>"
},
}
- template 中的内容必须被一个 DOM元素包括
- template 中也有 data、methods、computed
- template 中的 data 必须是一个方法
components: {
'my-component': {
template: "<h1>组件组件组件</h1>"
},
'btn-component': {
template: '<button @click="count++">{{count}}</button>',
data() {
return {
count: 0
}
}
}
5、使用 props 实现父组件向子组件传递数据
- 在组件中使用 props 来从父组件中接收参数，在 props 中定义的属性，都可以在组件中直接使用。
props 中的数据来自父级，而组件中 data return 的数据就是组件自己的数据，两种情况的作用域就是组件本身，可以在 template、computed 、methods 中直接使用。- props 的值有两种，一种是字符串数组，一种是对象
- 可以使用 v-bind 来动态绑定父组件传递过来的内容
- 子组件中，props 中的值可以直接使用
this.xxx来获取
