有时候非父子关系的组件也需要通信。在简单的场景下,使用一个空的Vue实例作为中央事件总线:
var bus = new Vue()
// 触发组件 A 中的事件
bus.$emit('id-selected', 1)
// 在组件 B 创建的钩子中监听事件
bus.$on('id-selected', function (id) {
// ...
})
在更多复杂的情况下,你应该考虑使用专门的 状态管理模式.就是用到了vuex
eventBus是作为兄弟关系的组件之间的通讯中介。
代码示
引言
在vue中组件传值有多种方式,我们最常用的是props,当然还有vuex,但是对于简单的场景,vuex显得过于复杂了,今天我们介绍另一种组件传值的方式——Bus总线
正文
使用一个空的Vue实例作为中央事件总线。实际应用中,将bus(空Vue)定义成单独的文件Bus.js
import Vue from 'vue'
const Bus = new Vue()
export default Bus
方法一:
在组件一中引入
import Bus from './Bus'
export de
最近在研究vue.js,总体来说还算可以,但是在web开发群里有一些人问在单文件组件开发模式中非父子组件如何传值的问题,今天在这里讲讲,希望对大家有所帮助!
在官网api中的这段讲解很少,也很模糊;官网中说明如下:
非父子组件通信:
有时候两个组件也需要通信 (非父子关系)。在简单的场景下,可以使用一个空的 Vue 实例作为中央事件总线:
var bus = new Vue();
// 触发组件 A 中的事件
bus.$emit('id-selected', 1)
// 在组件 B 创建的钩子