Vue 组件间通信的6种方式

2022/1/6 Vue2Vue3

# (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)插槽

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

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

Last Updated: 2022/3/30 07:26:41