vue provide和inject使用

provider、inject：简单的来说就是在父组件中通过provider来提供变量，然后在子组件中通过inject来注入变量。

注意：这里不论子组件有多深，只要调用了inject那么就可以注入provider中的数据。而不是局限于只能从当前父组件的prop属性来获取数据。

举例如下：

1：定义一个父组件

<template><div>
<childOne></childOne></div>
</template><script>import childOne from '../components/test/ChildOne'export default {name: "Parent",provide: {for: "demo"},components:{childOne}}

在这里我们在父组件中provide for这个变量。

2：定义一个子组件

<template><div>{
   {demo}}<childtwo></childtwo></div>
</template><script>import childtwo from './ChildTwo'export default {name: "childOne",inject: ['for'],data() {return {demo: this.for}},components: {childtwo}}
</script>

3：定义另一个子组件

<template><div>{
   {demo}}</div>
</template><script>export default {name: "",inject: ['for'],data() {return {demo: this.for}}}
</script>

在2个子组件中我们使用jnject注入了provide提供的变量for，并将它提供给了data属性。

注意：这里官网注明例子只工作在 Vue 2.2.1 或更高版本。低于这个版本时，注入的值会在 props 和 data 初始化之后得到。

从上面这个例子可以看出，只要在父组件中调用了，那么在这个父组件生效的生命周期内，所有的子组件都可以调用inject来注入父组件中的值。