Vue组件传参---兄弟组件传参（非父子组件传参）

方案一（最简单兄弟组件传参解决方案）：

• 原理：使用一个空的 Vue 实例作为“中转站”，进行发送和接收数据。

1、在main.js中添加

• new一个空的Vue实例，并将其挂载在原型上

Vue.prototype.bus=new Vue();

2、ComponentA组件中

<template>
  <div class="wrapper">
    <h3>这里是组件A</h3>
    <button @click="sendData">向组件B发送参数</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      Amsg:'我是来自ComponentA组件中的参数'
    };
  },
  methods:{
    sendData(){
    
      //此处为核心代码
      this.bus.$emit('sendMsg',this.Amsg)
      
    }
  }
};
</script>

2、ComponentB组件中

<template>
  <div class="wrapper">
    <h3>这里是组件B</h3>
    {{BMsg}}
  </div>
</template>

<script>
export default {
  data() {
    return {
      BMsg: ""
    };
  },
  created() {
  
    //此处为核心代码，涉及到ES6箭头函数
    this.bus.$on("sendMsg", val => this.BMsg = val);
    
  }
};
</script>

---

方案二：

与方案一相比方案二代码更繁琐，不推荐使用。下方已经列出代码不同之处

1、新建bus.js文件

import Vue from 'vue'
export default new Vue

2、ComponentA组件中

import bus from '.../bus.js'

bus.$emit('sendMsg',this.Amsg)

3、ComponentB组件中

import bus from '.../bus.js'

this.bus.$on("sendMsg", val => this.BMsg = val);

---

方案三：

如果数据量大而杂，则可以使用VueX，我将在后续文章中举例其使用方法。