vue兄弟组件之间传值通讯

让兄弟组件通过一个共同的父组件彼此通讯。

父组件：

<template>
  <div id="app">
    <div id="">
      <h3>{{Adata}}</h3>
      <left @leftFun="leftFun"></left>
      <!-- ↑left组件向父组件发送消息 -->
      <right :Amsg="Adata"></right>
      <!-- ↑right组件 接收父组件中的left消息 -->
    </div>
  </div>
</template>

<script>
  import left from './components/left.vue'
  import right from './components/right.vue'

  export default {
    name: 'app',
    data() {
      return {
        Adata: "父组件接收A消息:",
      }
    },
    components: {
      left,
      right
    },
    methods: {
      leftFun(val) {
        this.Adata = val
      }
    }
  }
</script>

兄弟A组件left.vue
通过emit定义事件函数，发送消息。共享msg数据给父组件

<template>
  <div>
    <button @click="fun">兄弟A</button>
  </div>
</template>

<script>
  export default {
    data(){
      return{
        msg:"我是兄弟A消息"
      }
    },
    methods:{
      fun(){
        this.$emit("leftFun",this.msg)
      }
    }
  }
</script>

兄弟B组件right.vue
接收父组件传来的: 兄弟A的msg消息

<template>
  <div>
    <h3>我是B组件,接收到A兄弟的消息是:{{Amsg}}</h3>
  </div>
</template>

<script>
  export default {
    props:["Amsg"],
    data(){
      return{

      }
    }
  }
</script>

兄弟组件之间传值–通过EventBus

随着应用程序越来越庞大，通过父组件来传递所有内容会把事情变得越来越棘手。不过我们还有另一种选择，那就是使用EventBus架起兄弟之间通讯的桥梁。接下来看看我们是如何利用这一点一完成兄弟组件之间的数据通讯。

父组件:

<template>
  <div id="app">
    <div id="">
      <left></left>
      <right></right>
    </div>
  </div>
</template>

<script>
  import left from './components/left.vue'
  import right from './components/right.vue'

  export default {

    name: 'app',
    data() {
      return {}
    },
    components: {
      left,
      right
    }
  }
</script>

兄弟AB组件的中介,EventBus.js文件

import Vue from 'vue'
export default new Vue()

兄弟A组件 left.vue

<template>
  <div>
    <button @click="fun">兄弟A 向B发消息</button>
  </div>
</template>

<script>
  import Bus from "./EventBus.js"
  export default {
    data(){
      return{
        msg:"我是兄弟A消息"
      }
    },
    methods:{
      fun(){
        Bus.$emit("leftFun",this.msg)
      }
    }
  }
</script>

兄弟B组件 right.vue

<template>
  <div>
    <h3>我是B组件,接收到A兄弟的消息是:{{Amsg}}</h3>
  </div>
</template>

<script>
  import Bus from "./EventBus.js"
  export default {
    data() {
      return {
        Amsg:""
      }
    },
    created() {
      Bus.$on("leftFun", val => {
        this.Amsg=val
      })
    }
  }
</script>

<style>
</style>

另外知识详细:
https://blog.csdn.net/lhb215215/article/details/82966300