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>