Vue 组件间通信的6种方式

阅读时间:

1

分钟

文章字数:

233

字

发布日期:

2022-01-06

最近更新:

Invalid Date

Vue

1. props

适用于的场景：父子组件通信

注意事项： 如果父组件给子组件传递数据（函数）：本质其实是子组件给父组件传递数据 如果父组件给子组件传递的数据（非函数）：本质就是父组件给子组件传递数据 书写方式：3 种 ['todos'],{type:Array},{type:Array,default:[]}

​ 小提示：路由的 props 书写形式:布尔值，对象、函数形式

2. 自定义事件

适用于场景：子组件给父组件传递数据 $on与$emit

3. 全局事件总线$bus

适用于场景：万能

书写方式：Vue.prototype.$bus = this;

4. pubsub-js,在 React 框架中使用较多。（消息发布与订阅）

​ 适用于场景：万能

5. Vuex

适用于场景：万能

6. 插槽

适用于场景：父子组件通信

默认插槽 具名插槽 作用域插槽