非父子组件通信:通过 event bus ,在一个组件创建时的钩子函数中监听 某个事件,而在需要与其进行通信的组件中触发这个函数,同时交换数据

HTML:

<div id="app">
	<foo></foo><br />
	<bar></bar>
</div>

JS:

(1)创建一个中转站,空的vue实例

var eventBus = new Vue({});

(2)//创建一个组件foo:去监听bar组件触发的函数,同时自己去触发bar组件的事件

var foo = {
	template:'<div>'+
		'<p>foo的数量:{{fooNum}}</p>'+
		'<button @click="addBar">增加bar的数量</button>'+
		'</div>',
	data:function(){
		return {
			fooNum:0
		}
	},
	//mounted是钩子函数,它是完成了挂载,使用created钩子函数是仅仅data数据初始化完成
	mounted:function(){
		var _this = this;
		eventBus.$on('foo',function(num){
			_this.fooNum+=num;
		})
	},
	methods:{
		addBar:function(){
			eventBus.$emit('bar',3);
		}
	}
}
(3)创建组件bar,与foo组件正好相反

var bar = {
	template:'<div>'+
		'<p>bar数量:{{barNum}}</p>'+
		'<button @click="addFoo">增加foo数量</button>'+
		'</div>',
	data:function(){
		return {
			barNum:0
		}
	},
	mounted:function(){
		var _this = this;
		eventBus.$on('bar',function(num){
			_this.barNum+=num;
		})
	},
	methods:{
		addFoo:function(){
			eventBus.$emit('foo',2);
		}
	}
}	

(4)最后,创建Vue实例,把组件放到局部components,完成局部注册
var vm = new Vue({
	el:'#app',
	components:{
		foo,
		bar
	}
})


Logo

前往低代码交流专区

更多推荐