chaihongjun.me

Vue兄弟组件之间传递数据的方法

官方教程里有分别介绍父子组件之间的传值方式,其中父组件向子组件传值方式是通过子组件的props属性接收数据完成,父组件模板内向子组件标签绑定的一个属性传值,然后再在子组件构造器内通过props接收这个属性。而子组件向父组件传值则是通过子组件emit(向父组件弹射通知)向父组件发出一个事件通知,告诉父组件,我这有个事情会发生的并且会带一些数据,父组件则在父组件的模板内on(监听这个事件)事件,并且针对这个事件针对性绑定一个父组件自己的方法(处理函数),这个函数就是用来对传递过来的数据进行处理的。

而兄弟组件之间的传值,其实是将父子传值的一些特点进行了结合,子组件之一将数据给到BUS,这个BUS在给到子组件之二。在不使用vuex的前提下,用到了一个第三方BUS:兄弟组件共同使用的一个插件(模块),这个Bus组件也是一个Vue实例对象。具体操作如下(SFC模式下):

  1. 首先实例化这个Bus

import Vue from 'vue'
export default new Vue()

将上面的代码写入一个文件,不如bus.js

Vue兄弟组件之间传递数据的方法

2. 分别在子组件内引入这个模块,路径请根据实际情况配置

import Bus from '@/plugins/bus.js'

Vue兄弟组件之间传递数据的方法

Vue兄弟组件之间传递数据的方法

3.这一步就是分别写哪个组件发送数据,哪个组件接收数据了。

发送数据方,一定是某个动作引发数据发送:

//sender:
<template>
  <div class="sender">
   ...
     <!--  fromSender 参数代表需要传递出去的值 -->
    <button @click="passDataToSbling(fromSender)"></button>
  
  </div>
</template>

<script>
import Bus from '@/plugins/bus.js'
....
methods:{
    // fromSender 参数代表需要传递出去的值
    passDataToSbling:function(fromSender){   
    // send 这里是string类型的,表示触发的事件,名称自定义,必须和接受方的名字一致。
            Bus.$emit('send',fromSender)     
    }
}

</script>

核心部分是

Bus.$emit(自定义事件名称,数据)

 

然后是另外一个兄弟组件去接收这个数据,然后进行后面的处理:

//accepter:
<template>
  <div class="accepter">
   ...
  
  </div>
</template>

<script>
import Bus from '@/plugins/bus.js'
....
created:function {
    // 这个组件的生命周期内接受到数据,然后处理
    // send 字符串类型 是自定义事件名称必须和发送方的一致
    Bus.$on('send',function(fromSender){
    
      //这里对fromSender这个数据进行处理
    
    })
}

</script>

核心部分是

Bus.$on(自定义事件名称,匿名方法)

匿名方法的参数是fromSender,这个方法会处理这个参数。

知识共享许可协议本作品采用知识共享署名-非商业性使用-禁止演绎 4.0 国际许可协议进行许可。作者:柴宏俊»