vue 中组件之间数据通信方式

// 总线方式：实现了任何组件间的通信, 包括父子、兄弟、跨级等. 当我们的项目比较大时, 可以选择更好的状态管理解决方案 vuex
1. bus 总线的方式 (把 bus 定义在 vue 的 prototype 上, 在全局都可以使用)
	（1） 在 main.js 中添加如下代码
		const Bus = new Vue()
		Vue.prototype.$bus = Bus
	(2) 在组件中 child1.vue (发送数据端)
		<button @click="sendTochild2">发送数据到child2</button>
		data() {
			return {
				child1Data: "我是child1中的数据"
			}
		},
		methods: {
			sendTochild2 () {
				this.$bus.$emit("getMessage", this.child1Data)
			}
		}
	(2) 在组件中 child2.vue (接收数据端)
		create () {
			this.$bus.$on("getMessage", this.getchild1sendData)
		},
		beforDestory () { // 注册的总线事件要在组件销毁时卸载, 否则会多次挂载, 造成触发一次但多次响应的情况。
			this.$bus.$off("getMessage", this.getchild1sendData)
		},
		methods: {
			getchild1sendData (data) {
				console.log(data) // data = "我是child1中的数据"
			}
		}

// 只适用于父子组件之间通信
2. props 和 $emit
	(2.1) 父组件向子组件传值, 在父组件 parent.vue 中
 	<child :user="user"></child> // 父组件中引用的子组件
 	
 	data () {
 		return {
			user: [1, 2, 3, 4, 5]
		}
 	}
	(2.2) 在子组件 child.vue 中
	props: {
		user: {
			type: Array, // 类型
			required: true, //必填
			default: () => {  // 默认值, 对象或数组的默认值必须是一个函数获得
				return [2, 2, 2] 
			},
			validator: (val) => { // 自定义验证函数, 这个值必须匹配下列规则
				return val.includes(4) 
			}
		}
	}

	(2.3) 子组件向父组件传值 (通过事件形式), 在组件 child.vue 中	
	<button @click="sendToParent">发送数据到父组件</button>
	
	methods: {
		sendToParent () {
			this.$emit("sendToParent", "我是子组件中的数据")
		}
	}		
	
	(2.4) 在父组件 parent.vue 中
	<child @sendToParent="sendToParent"></child>
	methods: {
		sendToParent (data) {
		  console.log(data) // 打印结果：我是子组件中的数据 
		}
	}

// 允许祖先组件向其所有子孙后代通信(就近原则, 只能上到下)
3. provide/ inject
// 比如组件调用关系： A.vue (祖先组件) -> B.vue -> C.vue -> D.vue
	(3.1) 在 A.vue 组件中
		provide () {
			return {
				info: this.info,
				getData: this.getData
			}
		},
		data () {
			return {
				info: "我是祖先中的数据"
			}
		},
		methods: {
			getData () {
				console.log("我是祖先中的事件")
			}
		}
	(3.2) 在 C.vue 组件中使用
	inject: ["info", "getData"]
	或者：
	inject: {
		c1: {
			from: "info",
			default: ""
		},
		C2: {
			from: "getData"
		}
	}