vue使用bus进行兄弟组件传值

1.新建bus.js

import Vue from 'vue'
export default  new Vue

2.在需要传值和接受值的vue文件中，各自引入bus.js

import bus from '../util/bus'

3.定义传值的方法，使用bus.$emit('methodName',data), methodName是自定义的方法名

<button @click="trans()">传值</button>

methods: {
    trans(){
      bus.$emit('test',this.helloData)
    }
  },

4.在要接收值的组件里，使用bus.on('methodName',val =>{ }) ,val 就是传过来的值

 mounted(){
    bus.$on('test',val=>{
      console.log(val);
      this.cdata = val
    })
  }

 

如果要传多个值：

 bus.$emit('test',data1,data2,data3……)

同样接收时候，需要接收多个值

bus.$on(test,(val,val2,val3……)=>{
     console.log(val,val2,val3)
})

 

如果需要不触发事件，就把值传递给兄弟组件，那么必须通过异步的方法传递，例如axios或者setTimeout

 // 不通过点击事件，把数据传递给兄弟组件，一定要setTimeout,或者axios请求
     setTimeout(() => {
       bus.$emit('test',data)
     }, 2000);

 

完整例子：

App.vue

<template>
  <div id="app">
     <HelloWorld/>
     <child></child>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld'
import Child from './components/Child'
export default {
  name: 'App',
  components: {
    HelloWorld,Child
  }
}
</script>

bus.js

import Vue from 'vue'
export default  new Vue

子组件HelloWorld.vue

<template>
<div>
<button @click="trans()">传值</button>
</div>
</template>
<script>
import bus from '../util/bus'
export default {
  name: "HelloWorld",
  data () {
    return {
      helloData:"hello"
    };
  },
  methods: {
    trans(){
      bus.$emit('test',this.helloData)
    }
  },
}
</script>

子组件Child.vue

<template>
<div>
{{cdata}}
</div>
</template>
<script>
import bus from '../util/bus'
export default {
  name: "Child",
  data () {
    return {
      cdata:"子数据"
    };
  },
  mounted(){
    bus.$on('test',val=>{
      console.log(val);
      this.cdata = val
    })
  }
}
</script>