vue的provide和inject的使用

最近发现一个这样的属性：inject和provide

简单的来说他俩就是在父子组件中通过provide来提供变量，组组件通过inject来注入变量，需要注意的是，这里区别于通过prop，$emit传参，前者不论子组件有多深，只要调用了inject就可以注入provide里面的数据了

下面来验证一下：

• 先定义一个父组件

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

• 再定义一个子组件

<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>

• 这里再定义一个子组件

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

在两个子组件中我们使用了inject注入了provide的变量for，并将它提供给data属性，就会在data里面进行初始化

运行后的结果为：

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