非父子组件间传值

Posted 2021-03-08 lora404

非父子组件间传值有两种方法，一种是vuex共享数据，另一种是发布订阅模式/观察者模式/总线/Bus。这篇随笔主要总结总线机制的学习心得：

首先通过在Vue.prototype上挂载一个bus属性，指向vue实例；接下来在调用Vue或者创建组件时都会有bus属性。

		Vue.prototype.bus=new Vue()
		var Child={
			props:[‘content‘],
			data:function() {
				return {num:this.content}
			}, //因为vue是单项数据流，子组件不能改变父组件传过来的值
			template:"<div @click=‘handleClick‘>{{num}}</div>",
			methods:{
				handleClick:function(){
					this.bus.$emit(‘change‘,this.num) //传值
				} //将值传递给另一个组件，由于bus是Vue实例，所以会有$emit方法向外触发事件
			},
			mounted:function() {
				var that=this //this的指向发生了变化
				this.bus.$on(‘change‘,function(msg) {
					that.num=msg
				}) //生命钩子监听change事件
			}
		}

其次在局部子组件接收父组件的值content，在模板中添加一个click事件用于触发事件和传值（向兄弟组件）。

随后在vue的生命周期函数mounted中监听change事件，用传过来的值修改DOM内容。

vue实例的定义如下：

var app = new Vue({
			el: ‘#app‘, //接管范围
			components: {
				Child:Child
			}
		})

	<div id=‘app‘>
	<child content="dell"></child>
	<child content="Lee"></child>
	</div>

　　最终实现点击一个组件，该组件的值会传给另一个组件。