首先, 我们创建一个 vue 项目
删除掉模板项目中的一些东西, 然后我们先来创建中央事件总线, 在 src/assets / 下创建一个 eventBus.js, 内容如下:
(eventBus 中我们只创建了一个新的 Vue 实例, 以后它就承担起了组件之间通信的桥梁了, 也就是中央事件总线.)
1, 向父组建传值, 向兄弟组件传值
创建一个 firstChild 组件, 引入 eventBus 这个事件总线, 给一个 input 输入框输入你要传的参数. 接着添加两个按钮, 分别给两个点击事件(一个向父组件传值, 一个向兄弟组件传值)
我们点击事件 sendData1 函数中,$emit 触发当前实例上的事件 giveFather. 附加参数 this.data 传给 receptionData 回调, 从而实现向父级传值
我们点击事件 sendData2 函数中 $emit 实例方法触发当前实例 (这里的当前实例就是 bus) 上的事件, 附加参数都会传给监听器回调. 从而实现向兄弟组件传值
2, 接收兄弟组件所传的值
我们再创建一个 secondChild 组件, 引入 eventBus 事件总线, 并用一个 h3 标签来显示传递过来的值
我们在 mounted 中, 监听了 giveBrother, 并把传递过来的参数传递给了 $on 监听器的回调函数
$on: 监听当前实例上的自定义事件 (此处当前实例为 bus). 事件可以由 $emit 触发, 回调函数会接收所有传入事件触发函数($emit) 的额外参数.
3, 接收父组件的传值
我们再再创建一个 thirdlyChild 组件, 只是接收父组件的传值, 不用引入 eventBus 事件总线, 并用一个 h3 标签来显示传递过来的值
在父组件中, 注册这这一堆, 并添加组件的标签
在调用组件 thirdlyChild 的时候, 使用 v-bind 将 childData(用 child-data 代替 childData 的驼峰写法) 的值绑定为 page1.vue 中定义的变量 data. 子组件通过 props 接收传值.
4, 下面是代码. 下载之后接的 npm install
项目包, 点击下载
来源: http://www.qdfuns.com/article/43043/28f20c69153d1d08db0baf8cd2e4898d.html