vue获取兄弟组件的值2020_vue兄弟组件的传值eventbus

注：当在a.vue组件上触发点击事件时，就会触发bus上监听的事件，而bus事件监听在b.vue里面，这个时候就会触发b.vue

上的事件监听，而通过回调函数，就可以拿到a.vue组件传过来的数据，从而实现兄弟组件通信。

###~~bus.js

import Vue from "vue"

export default new Vue()

parent.vue父组件

import avue from "./avue.vue"

import bvue from "./bvue.vue"

export default {

name: 'parentvue',

components:{avue,bvue}

}

###~~a.vue组件

叶落森1

import bus from "./bus.js"

export default{

methods:{

aload(){

//通过emit触发事件，并传值

bus.$emit("bload","我叫叶落森");

}

}

}

###~~~b.vue组件

叶落森2

import bus from "./bus.js"

export default{

mounted(){

//通过on监听事件，回调方法获取数据

bus.$on("bload",value=>{

console.log(value);

//this.busListen(value)//调用busListen这个方法

});

}

}

注：可以在main.js写(这是常用的方式)

Vue.prototype.bus = new Vue();

调用方法的时候直接书写以下代码就行

##~~a.vue

this.bus.$emit("bload");

##~~b.vue

mounted中写：

this.bus.$on("bload",this.bload);

methods中写：

methods:{

bload(){

}

原文链接：https://blog.csdn.net/xiasohuai/article/details/80664605