vue的provide和inject的理解

最近使用了别人的一个插件，看到别人用了provid和inject,感觉很有意思，mark一下

具体的东西，注意事项可以看官方的文档,我们只是讨论一下,provide和inject的常规用法

首先我们知道，父子组件传值的话，使用的是prop，但是要是爷孙组件传值的话，用什么？

有人讲用bus或者用vuex的，这当然行，但是vue提供了另外一种针对于爷孙或者其他的直系传值的方法，就是provide和inject。

注意，必须是直系的嵌套关系才能够使用

//祖先组件里面
<template>
	<view>
		<test></test>
	</view>
</template>

<script>
	import test from '../../components/test/test.vue'
	export default {
		data() {
			return {
			};
		},
		// provide 值接收一个对象
		provide:{
			foo:'123123'
		},
		components:{
			test
		}
	}
</script>

<style lang="scss">

</style>

在祖先页面中，我们定义了一个provide的对象，这个对象有一个属性，属性名就是我

在下面的直系亲属的组件里面通过inject获取到的

在这个页面的孙子组件里面 我我们通过inject[‘foo’]来获取到父组件的值

<template>
	<view>
		{{testFoo}}
	</view>
</template>

<script>
	export default {
		data() {
			return {
				testFoo: this.foo
			};
		},
		inject: ['foo'],
		mounted() {
			console.log('beforeCreate', this)
		}
	}
</script>

<style lang="scss">

</style>

获取到了这个值以后，我们就能够使用它了

另外一个最长用的用法，大概就是刷新组件了

比如我们向刷新一个组件，或者在孙子或者更加后代的组件里面去控制父组件里面的元素的显示和隐藏

//父亲组件
<template>
	<view>
		<test></test>
		<view v-if="ifHide">测试显示可隐藏</view>
	</view>
</template>

<script>
	import test from '../../components/test/test.vue'
	export default {
		data() {
			return {
				data1:'123123',
				ifHide:true
			};
		},
		// provide 值接收一个对象
		provide(){
			return{
				domHide:this.domHide
			}
		},
		methods:{
			domHide(){
				let that = this
				that.ifHide = !that.ifHide
			}
		},
		components:{
			test
		}
	}
</script>

<style lang="scss">

</style>

//孙子或者其他直系亲属里面
<template>
	<view>
		<button @click="changeHide">点击</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				testFoo: this.foo
			};
		},
		inject: ['domHide'],
		mounted() {
			console.log('beforeCreate', this)
		},
		methods:{
			changeHide(){
				this.domHide()
			}
		}
	}
</script>

<style lang="scss">

</style>