Vue入门八、非父子组件间通讯
生活随笔
收集整理的這篇文章主要介紹了
Vue入门八、非父子组件间通讯
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
通過Bus總線機(jī)制實(shí)施非父子組件通訊
1、創(chuàng)建一個(gè)空實(shí)例（Bus中央事件總線也可以叫中間組件）
2、利用$emit $on 觸發(fā)和監(jiān)聽事件實(shí)現(xiàn)非父子組件的通信
組件之間使用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() {// 先解綁再綁定，防止多組件點(diǎn)擊失效// 這里this.$bus.$on監(jiān)聽中間件獲取數(shù)據(jù)this.$bus.$off('hiHeader').$on('hiHeader', (val) => {this.sending = val})}}var myFoot = {template: `<div>我是腳<button @click="sendToHeader">發(fā)信息給頭部</button></div>`,methods: {sendToHeader() {// 觸發(fā)hiHeader事件傳遞數(shù)據(jù)this.$bus.$emit('hiHeader', '我的頭可不是面團(tuán)捏的')}}}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">發(fā)信息給頭部</button></div>`,methods: {sendToHeader() {// 觸發(fā)hiHeader事件傳遞數(shù)據(jù)this.$bus.$emit('hiHeader', '我的頭可不是面團(tuán)捏的')}}}new Vue({el: '#app',components: {myHeader,myFoot},template: `<div><myHeader></myHeader><myFoot></myFoot></div>`}) </script></body> </html>轉(zhuǎn)載于:https://blog.51cto.com/12012821/2401739
總結(jié)
以上是生活随笔為你收集整理的Vue入门八、非父子组件间通讯的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 分页存储管理和分段存储管理
- 下一篇： Java数据库开发