Vue电商项目--组件通信
组件通信6种方式
第一种：props
适用于的场景：父子组件通信
注意事项：
如果父组件给子组件传递数据（函数）：本质其实是子组件给父组件传递数据
如果父组件给子组件传递的数据（非函数）：本质就是父组件给子组件传递数据
书写方式：3种
【‘todos’】,{type:Array},{type:Array},{type:Array,default:[]}
小提示：路由的props
书写形式：布尔值，对象，函数形式
第二种：自定义事件
适用于场景：子组件给父组件传递数据
$on与$emit
第三种：全局事件总线$bus
适用于场景：万能
Vue.prototype.$bus=this
第四种：pubsub-js,在react框架中使用比较多（发布与订阅）
适用与场景：万能
第五种：vuex
适用与场景：万能
第六种：插槽
适用于场景：父子组件通信--（一般结构）
默认插槽
具名插槽
作用域插槽
自定义事件深入
原生的按钮会触发handler事件，但是组件event却不会。因为event1不是原生dom节点，绑定的click不是原生dom事件，而是自定义事件了。
如果我们需要使用原生的dom事件，那么我们需要加修饰符nactive(可以把自定义事件变成原生dom事件)
其实原理就是用到了事件的委派
自定义事件需要$emit来绑定
v-model深入
v-model实现原理
原生的input的方式也能实现v-model的效果
原生DOM当中有oninput事件，它经常结合表单元素一起使用，当表单元素文本内容发送改变的时候就会发出一次回调
vue2就是通过value与input事件结合实现v-model功能
通过v-model实现父子组件数据同步
这样要注意这俩个:value是不一样的 组件上的props
这俩个都可以实现父子组件通信，下面是缩写
效果是一样的
v-model实现原理：value与input事件实现的，而且还需要注意可以通过v-model实现父子组件数据
就是采用原理的方式将v-model就是一个@input的事件，然后将msg当做参数传递过去，通过props:['value']来接收input的value值，再然后通过$emit来发送给父组件中使用@input（当你使用v-model的时候就会默认绑定这个），把$event.target.value发送过去
sync属性修饰符
$event就是自定义事件传过来的实参
为了防止我看不懂，我没有采用它这种简写的方式。而是通过完整的方式实现它这种效果
如果使用sync修饰符
而加上sync修饰符，它有俩种含义：第一，父组件给子组件传递props money
第二，给当前子组件绑定了一个自定义事件，而且事件名称即为update：money
效果也是一样，但是更方便
这里有一个注意点
那么子组件也应该为这个开头
而这个update是我们添加了sync的时候自动给我们添加上的
总结：属性修饰符sync
可以实现父子组件数据同步
:money.sync ,代表父组件给子组件传递props[money] 给当前子组件绑定了一个自定义事件（update:money）
$attrs与$listeners
首先使用element-ui的的button 例如我们给他设置大小就用size
现在又一个需求，也就是我们封装一个类似于这个的组件，并且鼠标移动上去，有提示信息
我们在父组件上设置一个自定义属性
而我们可以通过$attrs的方式来接收父组件给我们传递过来的参数
这里我们需要知道一件事，如果props接受过的数据，$attrs中获取不到信息了
带一个提示的功能我们可以在外面添加一个a标签
这样我们就可以把全部的属性绑定到子组件中，但是要注意不能使用:
这里还有一个属性是$listeners，它是可以监听到子给父传递的自定义事件
然后不能用简写的方式，需要完整的。这样就能绑定父组件所有的自定义事件了
$children与$parent
这里有一个需求，那就是父组件找子组件借钱，父加钱，子减钱。那如何拿到子组件的money呢？
第一种方式ref
能拿到
那么如果向所有的孩子借钱，当然。我们可以采用ref的方式，但是太麻烦了。组件实例自身有一个属性$children,可以获取到当前组件当中，全部子组件
$children是组件实例的属性，可以获取当前组件的全部子组件【数组】
父拿子搞定。现在弄子给父
$parent组件实例的属性，可以获取当前子组件的父组件，进而可以操作父组件的数据与方法
混入mixin
如果项目当中出现很多结构类似功能，想到组件复用。
如果项目当中很多的组件js业务逻辑相似，就想到mixin。【可以把多个组件js部分重复，相似的地方】
就是我们之前写的代码的子组件的methods的逻辑都是相同的，此时就可以用到mixin
对外暴露相同的js业务逻辑
应用
作用域插槽
插槽：可以实现父子组件通信（通信的结构）
默认插槽
具名插槽
作用域插槽：子组件的数据来源于父组件，子组件决定不了自身结构与外观
父组件然后给子组件传结构
子组件把每条数据回传给父组件
这样就有颜色，可以区别开
像下面这个就是子给父回传一个index
回传的是一个对象，我们完全可以解构出来
