020_Vue非父子组件之间数据交互
生活随笔
收集整理的這篇文章主要介紹了
020_Vue非父子组件之间数据交互
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
1. 非父子組件之間數(shù)據(jù)交互
1.1. 單獨(dú)的事件中心管理組件間的通信
var eventHub = new Vue();1.2. 監(jiān)聽事件
eventHub.$on('event-name', fun);1.3. 銷毀事件
eventHub.$off('event-name');1.4. 觸發(fā)事件
eventHub.$emit('event-name', param);1.5. 圖解
1.6. 代碼?
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>非父子組件之間數(shù)據(jù)交互</title></head><body><div id="app"><div>父組件</div><div><button @click='handle'>銷毀事件</button></div><br /><br /><plus-zs></plus-zs><br /><minus-zs></minus-zs></div><script type="text/javascript" src="vue.min.js"></script><script type="text/javascript">// 單獨(dú)的事件中心管理組件間的通信var eventHub = new Vue();Vue.component('plus-zs', {data: function(){return {num: 0}},template: `<div><div>lisi: {{num}}</div><div><button @click='handle'>加zs</button></div></div>`,methods: {handle: function(){eventHub.$emit('plus-event', 2);}},mounted: function() {eventHub.$on('minus-event', (val) => {this.num -= val;});}});Vue.component('minus-zs', {data: function(){return {num: 0}},template: `<div><div>zhangsan: {{num}}</div><div><button @click='handle'>減ls</button></div></div>`,methods: {handle: function(){// 觸發(fā)事件eventHub.$emit('minus-event', 1);}},mounted: function() {// 監(jiān)聽事件eventHub.$on('plus-event', (val) => {this.num += val;});}});var vm = new Vue({el: "#app",methods: {handle: function(){// 銷毀事件eventHub.$off('minus-event');eventHub.$off('plus-event');}}});</script></body> </html>1.7. 效果圖
1.8. 點(diǎn)擊加zs按鈕?
1.9. 點(diǎn)擊減ls按鈕?
總結(jié)
以上是生活随笔為你收集整理的020_Vue非父子组件之间数据交互的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 019_Vue子组件向父组件传值
- 下一篇： 021_Vue插槽