兄弟组件间的传值方式(简单小例子,易懂易会用)

1.新建一个bus.js文件(可以使用一个空的Vue实例作为中央事件总线。)

import Vue from 'vue'
const Bus = new Vue()
export default Bus

2.在组件1中
组件调用时先引入

        按钮1
    
export default {
     data(){
      return{
   bgc:"skyblue"
       }
        },
   created(){
//页面一刷新bus对象开启自定义事件监听,监听其他组件是否修改bgc变量
bus.$on("changeBgc",val=>{
 //这是事件函数 一旦changeBgc事件被触发,就会执行这里的代码
 this.bgc = val
                })
    },

  }      

3.2.在组件22中
组件调用时先引入

        按钮2
    

import Bus from './Bus'
export default {
    data() {
        return {
            }
      },
methods: {
//点击事件修改兄弟组件的bgc颜色
hdClick(){
//通过bus.$emit修改第一个参数是事件名,第二个是要修改的参数
// bus对象触发自定义事件changeBgc
 bus.$emit("changeBgc", "red")
    
 }, 
}