Vue如何解决兄弟组件之间传值问题

// bus.js
import Vue from 'vue';
export default new Vue();

// 在 vue组件中引入
import bus from "../../utils/bus";

methods: {
      busFun(data) {
        // 通过 $emit 来触发方法，参数1 是定义方法名，参数2 是你要发送的数据
        bus.$emit('name', data)
      },
    }

// 这个组件需要上车，我们先设立一个车站
import bus from "../../utils/bus";

 created() {
      bus.$on('name', (data) => {
        console.log(data, '上车成功');
      })
    },
    // 打卡
    beforeDestroy() {
      bus.$off('name');
    },

// 我们在main.js中用常量创建一个bus，然后将它放入Vue实例的原型对象中。
const bus = new Vue()
Vue.prototype.$bus = bus;

 created() {
      this.$bus.$on('name', (data) => {
        console.log(data, '上车成功');
      })
    },
    // 打卡
    beforeDestroy() {
      this.$bus.$off('name');
    },

<template>
  <div class="home">
    <HelloWorld :newMsg="msg" /> 
    //绑定子组件newMsg(props值) = 父组件msg(data值)
  </div>
</template>

<script>
import HelloWorld from "@/components/HelloWorld.vue";
export default {
  name: "Home",
  data(){
    return{msg:'Welcome to vue.js'} //父组件数据msg
  },
  components: {HelloWorld}
};
</script>

<template>
  <div>
    <h1>{{ newMsg }}</h1>  //直接调用newMsg，显示“Welcome to Vue.js”
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  props: {newMsg: String}  //为子组件定义newMsg(props值)接收父组件msg
  //或者props:['newMsg']
};
</script>

<script>
export default {
  name: "HelloWorld",
  data() {
    return {msg:"Welcome to Vue"} //data值，即将向上传递的值
  },
  created(){
    this.$emit('change',this.msg) //向上传递自定义事件change和data值。这里我调用created生命周期函数触发$emit()
  }
};
</script>

<template>
  <div class="home">
    <HelloWorld @change="handle" /> //监听到子组件传递来的事件并响应handle方法
    <span>{{newMsg}}</span>  //直接调用newMsg，显示“Welcome to Vue”
  </div>
</template>

<script>
import HelloWorld from "@/components/HelloWorld.vue";
export default {
  name: "Home",
  data() {
    return {newMsg:""}
  },
  methods:{
    handle(msg){           //定义handle方法，将自动接收到的msg值给了自己的newMsg
      this.newMsg = msg
    }
  },
  components: {HelloWorld}
};
</script>

<script>
export default {
  name: "HelloWorld",
  data() {
    return {msg:"Welcome to Vue"}  //即将向父传递的data值
  }
};
</script>

<template>
  <div class="home">
    <HelloWorld ref="son" />  //在子组件上定义一个ref 名为"son"
  </div>
</template>

<script>
import HelloWorld from "@/components/HelloWorld.vue";
export default {
  name: "Home",
  mounted(){
    console.log(this.$refs.son.msg)  //获取到ref名为"son"的子组件内msg数据，在控制台显示“Welcome to Vue”
  },
  components:{HelloWorld}
};
</script>

<template>
  <div>click me</div>
</template>

<script>
export default {
  name: "HelloWorld",
  data() {
    return {helloMsg:"Welcome to Vue"} //即将传送的数据helloMsg
  }
};
</script>

<template>
  <div>
    {{hiMsg}}  //直接调用hiMsg，显示“Welcome to Vue”
  </div>
</template>

<script>
export default {
  name: "Hi",
  props:{hiMsg:String} //用来接收父组件传值的props属性hiMsg
};
</script>

<template>
  <div class="home">
    <HelloWorld ref="son" @click.native="change"></HelloWorld> //定义ref属性接收组件A传来的数据；点击组件A触发change()
    <Hi :hiMsg="msg"></Hi>  //绑定组件B的hiMsg=msg，将数据转发给组件B
  </div>
</template>

<script>
import HelloWorld from "@/components/HelloWorld.vue";
import Hi from "@/components/Hi.vue";
export default {
  name: "Home",
  data(){
    return{ msg: "" }
  },
  methods:{
    change(){
      return this.msg = this.$refs.son.helloMsg //将组件A传来的helloMsg赋予this.msg
    }
  },
  components:{HelloWorld, Hi}
};
</script>