當前位置：首頁 > 前端技术 > vue >内容正文

vue

Vue入门八、非父子组件间通讯

發布時間：2025/7/25 vue 43 豆豆

生活随笔收集整理的這篇文章主要介紹了 Vue入门八、非父子组件间通讯小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

通過Bus總線機制實施非父子組件通訊
1、創建一個空實例（Bus中央事件總線也可以叫中間組件）
2、利用$emit $on 觸發和監聽事件實現非父子組件的通信
組件之間使用this.$bus.$on傳值之前需要先this.$bus.$off注銷事件
即：
this.$bus.$off('hiHeader').$on('hiHeader', (val) => {
this.sending = val
})
詳見：組件之間使用this.$bus.$on傳值之前需要先this.$bus.$off注銷事件

一、通過this.$bus.$on()方式

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body> <script type="text/javascript" src="vue.js"></script> <div id="app"></div> <script type="text/javascript">// 定義通訊中間件Vue.prototype.$bus = new Vue()var myHeader = {template: `<div>我是頭部|{{sending}}</div>`,data() {return {sending: ''}},created() {// 先解綁再綁定，防止多組件點擊失效// 這里this.$bus.$on監聽中間件獲取數據this.$bus.$off('hiHeader').$on('hiHeader', (val) => {this.sending = val})}}var myFoot = {template: `<div>我是腳<button @click="sendToHeader">發信息給頭部</button></div>`,methods: {sendToHeader() {// 觸發hiHeader事件傳遞數據this.$bus.$emit('hiHeader', '我的頭可不是面團捏的')}}}new Vue({el: '#app',components: {myHeader,myFoot},template: `<div><myHeader></myHeader><myFoot></myFoot></div>`}) </script></body> </html>

二、通過this重定向

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body> <script type="text/javascript" src="vue.js"></script> <div id="app"></div> <script type="text/javascript">// 定義通訊中間件Vue.prototype.$bus = new Vue()var myHeader = {template: `<div>我是頭部|{{sending}}</div>`,data() {return {sending: ''}},created() {// 重定向thisvar transfer = this// transfer.$bus.$off('hiHeader').$on('hiHeader', function (val) {// transfer.sending = val// })transfer.$bus.$on('hiHeader', (val)=>{transfer.sending = val})}}var myFoot = {template: `<div>我是腳<button @click="sendToHeader">發信息給頭部</button></div>`,methods: {sendToHeader() {// 觸發hiHeader事件傳遞數據this.$bus.$emit('hiHeader', '我的頭可不是面團捏的')}}}new Vue({el: '#app',components: {myHeader,myFoot},template: `<div><myHeader></myHeader><myFoot></myFoot></div>`}) </script></body> </html>

轉載于:https://blog.51cto.com/12012821/2401739

總結

以上是生活随笔為你收集整理的Vue入门八、非父子组件间通讯的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。