vue兄弟组件的传值eventbus
Posted huchong-bk
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue兄弟组件的传值eventbus相关的知识,希望对你有一定的参考价值。
注:当在a.vue组件上触发点击事件时,就会触发bus上监听的事件,而bus事件监听在b.vue里面,这个时候就会触发b.vue
上的事件监听,而通过回调函数,就可以拿到a.vue组件传过来的数据,从而实现兄弟组件通信。
###~~bus.js
import Vue from "vue"
export default new Vue()
parent.vue父组件
<template>
<div id="app">
<avue></avue>
<bvue></bvue>
</div>
</template>
<script>
import avue from "./avue.vue"
import bvue from "./bvue.vue"
export default {
name: ‘parentvue‘,
components:{avue,bvue}
}
</script>
###~~a.vue组件
<template>
<div @click="aload">叶落森1</div>
</template>
<script>
import bus from "./bus.js"
export default{
methods:{
aload(){
//通过emit触发事件,并传值
bus.$emit("bload","我叫叶落森");
}
}
}
</script>
###~~~b.vue组件
<template>
<div>叶落森2</div>
</template>
<script>
import bus from "./bus.js"
export default{
mounted(){
//通过on监听事件,回调方法获取数据
bus.$on("bload",value=>{
console.log(value);
//this.busListen(value)//调用busListen这个方法
});
}
}
</script>
注:可以在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
以上是关于vue兄弟组件的传值eventbus的主要内容,如果未能解决你的问题,请参考以下文章
vue的组件通讯 父传子 -- 子传父-- 兄弟组件的传值 vue的组件传值
uniapp和vue组件之间的传值方法(父子传值,兄弟传值,跨级传值,vuex)