vue组件间的通讯方式汇总

vue组件间的通讯方式
1，组件间通信（父向子）：props
子如何修改父的数据？
转存一份在子组件中直接修改（各个子组件中数据独立）
通过vue自定义事件 通知父组件已改（各个子组件中数据公用）
2，组件间通信（子向父）：vue自定义事件
3，组件间通信（非父子）：事件总线pubsub
4，组件间通信：普通插槽，具名插槽，作用域插槽
5，组件间通信：vuex
6，如果有路由环境可以通过url进行组件数据传递
7，localStroage seesionStroage
8，$event深入：如果$event出现在dom事件中代表dom事件对象
如果$event出现在vue自定义事件中代表$emit的第二个参数。
v-on:事件名.修饰符=“回调”:
如果修饰符为native则将vue的自定义事件转为原生dom事件。
9，组件间通信高级：v-model
给输入型的dom元素使用：v-model代表数据双向绑定
给vue组件使用：v-model代表子向父的数据传递

等价于
<myZJ ：value=“msg” @input=“msg = $event”>
10，组件间通信高级：.sync属性修饰符
语法：v-bind:属性名.sync=“数据”
组件：
<myZJ ：xxx.sync=“money” >
等价于
<myZJ ：xxx=“money” @update:xxx=“money= $event”>

11，组件间通信高级：$attrs与$listeners
v-bind扩展高级使用：v-bind:{a:a,b:b}
$attrs:排除props声明，排除class,排除style的所有组件标签属性组成的对象。
v-on扩展使用 ：v-on:{click:fn,mousemove:fn2}
$listeners:组件标签绑定的所有自定义事件监听对象12，组件间通信高级：$refs $children与$parent
$refs组件标记(有可能是dom节点，有可能是组件对象)
$children:组件的所有子组件
$parent:组件的父组件
13，组件间通信高级：provide&inject
provide 和inject主要在开发高阶插件/组件库时使用。
provide 和inject进行数据传递是不具备响应式的。
顶层组件：
provide(){
return{msg:“xxx”}//传递给子孙组件的数据
}
子孙组件
inject:[“msg”]//模板中直接使用。