vue组件间通信方式有哪些:
组件间通信的分类可以分成以下
- 父子组件之间的通信
- 兄弟组件之间的通信
- 祖孙与后代组件之间的通信
- 非关系组件间之间的通信
vue中组件间的通信方式
通过 props 传递
- 适用场景：父组件传递数据给子组件
- 子组件设置props属性，定义接收父组件传递过来的参数
- 父组件在使用子组件标签中通过字面量来传递值
父组件：
子组件(props三种接收方式)：
通过 $emit 触发自定义事件
- 适用场景：子组件传递数据给父组件
- 子组件通过
$emit触发自定义事件，$emit第二参数为传递的数值 - 父组件绑定监听器获取到子组件传递过来的参数
父组件：
子组件：
使用 ref
- 父组件在使用子组件的时候设置ref
- 父组件通过设置子组件ref来获取数据
父组件：
EventBus
- 使用场景：兄弟组件传值
- 创建一个中央事件总线EventBus
- 兄弟组件通过
$emit触发自定义事件，$emit第二个参数为传递的数值 - 另一个兄弟组件通过
$on监听自定义事件
$parent和$children
- 子组件中用this.$parent来获取父组件通信
- 父组件中用this.$children来与子组件通信
attrs 与 listeners(Vue3中弃用，均合并到$attrs中)
- $attrs本身不是响应式的，除非访问的属性本身是响应式对象
父组件：
儿子组件：
孙子组件：
父组件可以给他的子孙组件传递消息：
子孙组件可以修改数据：
Provide 与 Inject
- 在祖先组件定义provide属性，返回传递的值
- 在后代组件通过inject接收组件传递过来的值
父组件中：
孙子组件中：
Vuex
- state用来存放共享变量的地方
- getter，可以增加一个getter派生状态，(相当于store中的计算属性），用来获得共享变量的值
- mutations用来存放修改state的方法
- actions也是用来存放修改state的方法，不过action是在mutations的基础上进行。常用来做一些异步操作
pubsub-js
- 消息的定阅与发布（React中使用较多）
插槽
- 默认插槽
- 具名插槽
- 作用域插槽
小结
- 父子关系的组件数据传递选择 props与$emit进行传递，也可选择ref
- 兄弟关系的组件数据传递可选择
$bus，其次可以选择$parent进行传递 - 祖先与后代组件数据传递可选择attrs与listeners或者 Provide与 Inject
- 复杂关系的组件数据传递可以通过vuex存放共享的变量
