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

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

import Vue from 'vue'

export default new Vue();

2、在需要传值的页面引用并开始传参

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

使用Bus.$emit()来进行传值

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

3、获取传参的值

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

}
</script>

用Bus.$on()来接收参数

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

4、查看效果，可以实现兄弟组件之间传值，实时更新数据了