vue组件传值不外乎三种，父传子、子传父、平级，今天我们就来着重说说vue平级组件如何传递参数值？

        假设你有两个Vue组件需要通信： A 和 B ，A组件按钮上面绑定了点击事件，发送一则消息，B组件接收。

• 初始化，全局创建$bus

        直接在项目中的 main.js 初始化 $bus :

// main.js
window.$bus=new Vue();

        注意，这种方式初始化一个 全局的事件总线 。

• 发送事件

        $bus.$emit("aMsg", '来自A页面的消息');

<!-- A.vue -->
<template>
   <button @click="sendMsg()">-</button>
</template>
<script> 
//import $bus from "../bus.js";
export default {
 methods: {
   sendMsg() {
     $bus.$emit("aMsg", '来自A页面的消息');
   }
 }
}; 
</script>

        接下来，我们需要在 B页面 中接收这则消息。

• 接收事件

        $bus.$on("事件名",callback)

<!-- IncrementCount.vue -->
<template>
 <p>{{msg}}</p>
</template>
<script> 
//import $bus  from "../bus.js";
export default {
 data(){
   return {
     msg: ''
   }
 },
 mounted() {
   $bus.$on("aMsg", (msg) => {
     // A发送来的消息
     this.msg = msg;
   });
 }
};
</script>

        事件总线推荐下面写法:

        集中式的事件中间件就是 Bus。我习惯将bus定义到全局：

app.js

var eventBus = {
    install(Vue,options) {
        Vue.prototype.$bus = vue
    }
};
Vue.use(eventBus);

        然后在组件中，可以使用$emit， $on， $off 分别来分发、监听、取消监听事件：

• 分发事件的组件

// ...
methods: {
  todo: function () {
    this.$bus.$emit('todoSth', params);  //params是传递的参数
    //...
  }
}

• 监听的组件

// ...
created() {
  this.$bus.$on('todoSth', (params) => {  //获取传递的参数并进行操作
      //todo something
  })
},
// 最好在组件销毁前
// 清除事件监听
beforeDestroy () {
  this.$bus.$off('todoSth');
}

        如果需要监听多个组件，只需要更改 bus 的 eventName:

// ...
created() {
  this.$bus.$on('firstTodo', this.firstTodo);
  this.$bus.$on('secondTodo', this.secondTodo);
},
// 清除事件监听
beforeDestroy () {
  this.$bus.$off('firstTodo', this.firstTodo);
  this.$bus.$off('secondTodo', this.secondTodo);
}

        通过以上内容我们知道了vue兄弟平级组件如何传递参数值？感谢您访问“我爱捣鼓(www.woaidaogu.com)”网站的内容，希望对大家有所帮助！引用本文内容时，请注明出处！谢谢合作！