## 1.组件
### 1.1组件相关概念
- 定义：组件是可复用的 Vue 实例, 封装标签, 样式和JS代码
- 作用：复用代码，不造成污染
- 使用：创建组件 ，引入组件，注册组件， 使用组件
```js
//全局组件
import Vue from 'vue'
import 组件对象 from 'vue文件路径'
Vue.component("组件名", 组件对象)
最后：组件名当成标签名，哪里需要哪里用
//局部组件
import 组件对象 from 'vue文件路径'
export default {
components: {
"组件名": 组件对象
}
}
最后：组件名当成标签名，限制在本组件使用
注意点：重要): 组件内template只能有一个根标签==
==(重要): 组件内data必须是一个函数, 独立作用域
注：scoped 解决多个组件样式名相同, 冲突问题,style加属性名
## 2.组件通信
### 2.1 父向子通信
- 子组件：配置props
- 父组件：在子组件标签中添加props配置中的属性
- props内容是只读的，不能修改
### 2.2.子向父通信
- 目标: 从子组件把值传出来给外面使用
- 父组件中添加自定义事件 @自定义事件名="父methods函数"
- 子组件中触发自定义事件，传参数this.$emit("自定义事件名", 传值) - 执行父methods里函数代码
### 2.3全局事件总线
1.定义全局事件总线作为挂载
```js
import Vue from 'vue'
// 导出空白vue对象
export default new Vue()
2.在需要数据的地方绑定事件（在created钩子中）
```js
import eventBus from '../EventBus' //先导入
created() {//再绑定
eventBus.$on("send", (index, price) => {
this.arr[index].proprice > 1 &&
(this.arr[index].proprice = (this.arr[index].proprice - price).toFixed(2));
});
