Vue 兄弟组件之间传值 Bus方法

本文针对两个无关联的组件，A组件触发B组件的方法并传值
注意：A、B是兄弟组件，不是父子组件。

1、在vue项目中新建一个js文件（文件名：bus.js）

// 仅针对两个无关联的兄弟组件使用
import Vue from 'vue'
export default new Vue();

2、在需要传值的A页面引用并开始传参
使用Bus.$emit()来进行传值

使用 Bus.$emit() 第一个参数为传参的名字 第二个参数为传参值

<script>
import Bus from '../plugins/bus'   //路径找到刚刚创建的bus.js
export default {
    data(){
        return{
          value:''
        }
    },
    methods:{
      sum(){
        Bus.$emit('summ',this.value)   //用Bus.$emit()来传值
      }
    }
}
</script>

3、在B页面获取传参的值
用Bus.$on()来接收参数

用Bus.$on() 第一个参数为接收的参数名 ，第二个为匿名函数，data表示接收的值

<script>
import Bus from '../plugins/bus'   //路径找到刚刚创建的bus.js
export default {
    data(){
        return{
          value:''
        }
    },
    created(){  //在created中使用
      Bus.$on('summ',(data)=>{   //使用summ的值
        this.value = data
      })
    }
 
}
</script>