Vue 各种组件之间传值

原创 牛粪 随笔 js 473阅读 2018-05-29 18:14:13 举报


首先,我们创建一个Vue项目
删除掉模板项目中的一些东西,然后我们先来创建中央事件总线,在src/assets/下创建一个eventBus.js,内容如下:
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
项目包,点击下载

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复