[JavaScript知识库]vue组件之间的数据共享

父—子共享数据：使用自定义属性。

//父组件
<Son :msg="message" :user="userInfo"/>
data() {
	return {
		message: "hello",
		userInfo: {
			name: "zs",
			age: 12
		}
	}
}

//子组件
props: ['msg', 'user']

子—父共享数据：使用自定义事件。

//子组件
export default {
	data() {
		return {
			count: 0,
		}
	},
	methods: {
		add() {
			this.count += 1;
			this.$emit('numchange', this.count);
		}
	}
}

//父组件
<Son @numchange="getNewCount"/>
export default {
	data() {
		return {
			countFromSon: 0
		}
	},
	methods: {
		getNewCount(val) {
			this.countFromSon = val;
		}
	}
}

兄弟关系：在Vue2.x中数据共享的方案是EventBus。

//eventBus.js
//创建eventBus.js模块，向外共享一个Vue的实例对象。
import Vue from 'vue';
export default new Vue();

//兄弟组件A：数据发送方
//在数据发送方，调用bus.$emit('事件名称', 要发送的数据)方法触发自定义事件。
import bus from './eventBus.js'
export default {
	data() {
		return {
			msg: 'hello'
		}
	},
	methods: {
		sendMsg() {
			bus.$emit('share', this.msg);
		}
	}
}

//兄弟组件B：数据接收方
//在数据接收方，调用bus.$on('事件名称', 事件处理函数)方法注册一个自定义事件。
import bus from './eventBus.js'
export default {
	data() {
		return {
			msgFromLeft: ''
		}
	},
	methods: {
		sendMsg() {
			bus.$on('share', val => {
				this.msgFromLeft = val;
			});
		}
	}
}