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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM