vue组件的定义
● 组件(Component)是Vue.js最强大的功能之一
● 组件可以扩展HTML元素，封装可重用代码
● 在较高层面上，组件是自定义元素，Vue.js的编译器为他添加特殊功能
● 有些情况下，组件也可以表现用 is 特性进行了扩展的原生的HTML元素
● 所有的Vue组件同时也都是Vue实例，所以可以接受相同的选项对象（除了一些根级特有的选项），并提供相同的生命周期钩子
vue组件的功能
1）能够把页面抽象成多个相对独立的模块
2）实现代码重用，提高开发效率和代码质量，使得代码易于维护
Vue组件封装过程
● 首先，使用Vue.extend()创建一个组件
● 然后，使用Vue.component()方法注册组件
● 接着，如果子组件需要数据，可以在props中接受定义
● 最后，子组件修改好数据之后，想把数据传递给父组件，可以使用$emit()方法
封装组件三要素
1.props：父传子
2.事件(派发和监听)
this.$emit()派发事件
通过@或$on来监听事件
3.slot（插槽），内容分发
命名插槽
<slot name="命名插槽名"></slot>
例如：<slot name="qrcode"></slot>
使用：
<div slot="qrcode">
.....
</div>
封装组件思考：
1.你想向用户暴露哪些属性 (props)
2.你想向用户暴露哪些事件，让用户监听来处理后续的业务 ($emit,@)
3.你想让用户嵌入哪些自定义的内容（slot）
组件的mixins（也称混入）
即将多个组件中，逻辑相同的部分抽离出来，相当于组件之间相同逻辑的复用！
步骤：
第一步：创建一个mixin文件（js文件）
const mixins = {
data() {
return {
w:'word'
}
},
methods: {
// 确定
confirm () {
// this.app.getData(666);
// 子级派发confirm事件
this.$emit('confirm', { name: this.name, price: this.price })
},
// 取消
cancel () {
this.$emit('cancel')
}
}
}
export default mixins;
第二步：引入到组件中并且通过mixins注入
import mixins from '../utils/mixin
export default {
name: 'maskDialog',
mixins: [mixins],
props: {},
methods:{}
}
组件分类：
1.业务组件 只能在当前项目中使用的组件例如：购物车，商品列表，登录 职位：前端程序员，码农，coder
2.公共组件：在项目中可以通用的项目 例如：星星评分，弹框， 职位：前端负责人，组长
3.基础组件：任何项目都能使用的组件 例如：封装一个icon图标组件,button按钮 职位：架构师，
$attrs
主要用于接收没有通过props传递的属性，可以通过$attrs将父组件（shopping.vue）的值传递给中间组件（A组件）的子组件（B组件）
```
例如： <Bcom v-bind="$attrs"></Bcom>
B组件内部接收：通过{{ $attr.属性名接收}}
例如：{{ $attrs.name }}
```
购物车组件>A组件->B组件
$listeners：主要用于由子组件向父组件传递事件
```
例如：由B组件派发事件到购物车组件，购物车如果要监听的事件，必须给A组件内部的B组件通过v-on添加$listeners，
<Bcom v-bind="$attrs" v-on="$listeners"></Bcom>
```
> **说的再俗气一点：用本地存储也可以实现上面的所有通讯方式**