Vue中使用provide和inject

成对出现：provide和inject是成对出现的。
作用：用于父组件向子孙组件传递数据。
使用方法：provide在父组件中返回要传给下级的数据，inject在需要使用这个数据的子辈组件或者孙辈等下级组件中注入数据。
使用场景：由于vue有$parent属性可以让子组件访问父组件。但孙组件想要访问祖先组件就比较困难。通过provide/inject可以轻松实现跨级访问父组件的数据。
类型：

provide：Object | () => Object
inject：Array<string> | { [key: string]: string | Symbol | Object }

inject 选项应该是：一个字符串数组或一个对象，对象的 key 是本地的绑定名，value 是：
在可用的注入内容中搜索用的 key (字符串或 Symbol)，或一个对象，该对象的：
from property 是在可用的注入内容中搜索用的 key (字符串或 Symbol)
default property 是降级情况下使用的 value
父组件：

<template>
	<div>
		<div>{{test}}</div>
    	<button @click="changeTest">修改test的值</button>
    	<son></son>
  	</div>
</template>
<script>
	import Son from "./Son";
	export default {
	  	name: "parent",
	  	components: { Son },
	  	provide() {
	    	return {
	      		injectData: this.test
	    	};
	  	},
	  	data() {
	    	return {
	      		test: "测试",
	    	};
	  	},
	  	methods: {
	    	changeTest() {
	      		this.test = "测试后";
	    	}
	  	}
	};
</script>

子组件

<template>
	<div>{{injectData}}</div>
</template>
<script>
	export default {
		name: "son",
		inject: [ "injectData" ],
		mounted() {
			console.log(this.injectData)
		}
	};
</script>
// 或
<script>
	export default {
		name: "son",
		inject: {
		    injectData: { default: 'injectData' }
		},
		mounted() {
			console.log(this.injectData)
		}
	};
</script>
// 或
<script>
	export default {
		name: "son",
		inject: {
	    	injectData: {
	      		from: 'parent',
	      		default: 'injectData'
	    	}
	  	},
		mounted() {
			console.log(this.injectData)
		}
	};
</script>
// 或
<script>
	export default {
		name: "son",
	  	inject: {
		    injectData: {
		      	from: 'parent',
		      	default: () => ”123“
		    }
	  	},
		mounted() {
			console.log(this.injectData)
		}
	};
</script>