Vue中provide和inject的用法

在前面的Vue组件的定义使用和参数传递中，虽然可以使用props和this.$emit进行父子组件的参数传递，但是对于有多级关系的组件，比如有组件 祖先->孩子->孙子，那么这样做就比较麻烦了，如果孙子组件想获取祖先组件的某个参数count，那么祖先组件首先得把参数count传递给孩子组件，然后孙子组件才能从孩子组件中获取参数count。这样一环套一环增加了编程的复杂度。所以，vue为了解决这个问题provide和inject出现了，它是 Vue 在 2.2.0 版本新增的 API。

下面举例说明它的用法：

1. 创建3个组件文件

/src/components/ParentView.vue 

<template>
  <div>
    <SonView></SonView>
    祖先组件
  </div>
</template>

<script>
import SonView from "@/components/example/SonView";
export default {
  name: "ParentView",
  components: {SonView},

  provide(){
    return {
      count: 100,
    }
  },
}
</script>

<style scoped>

</style>

有2种provide方式，如下

//方法1
provide: {
  content: 'hello world'
}

//方法2
provide(){
  return {
    content: 'hello world'
  }
}

/src/components/SonView.vue

<template>
  <div>
    <GrandSonView></GrandSonView>
    <p>孩子组件</p>
  </div>
</template>

<script>
import GrandSonView from "@/components/example/GrandSonView";
export default {
  name: "SonView",
  components: {GrandSonView},

}
</script>

<style scoped>

</style>

/src/components/GrandSonView.vue

<template>
  <div>
    <p>孙子组件，获取到祖先的count值：{{ count }}</p>
  </div>
</template>

<script>
export default {
  name: "GrandSonView",
  inject:['count']

}
</script>

<style scoped>

</style>

有3种inject的方式

//方法1
inject: ['content']

//方法2
inject: {
  content: 'content'
}

//方法3
inject: {
  content: {
    from:'content',
    default:'hello world'
  }
}

<template>
  <div>
    <p>Vue中provide和inject的用法例子：</p>
    <ParentView></ParentView>
  </div>
</template>
<script>
import ParentView from "@/components/example/ParentView";
export default {
  name: "HomeIndex.vue",
  components: {ParentView },
  data() {
    return {
    }
  },
  created: function(){
  },
}
</script>

<style scoped>

</style>

我们发现祖先组件成功将变量count传递给了孙子组件。

如果中间那个孩子节点也提供参数count呢？

我们修改代码 /src/components/SonView.vue，给他增加count参数并赋值为10。

<template>
  <div>
    <GrandSonView></GrandSonView>
    <p>孩子组件</p>
  </div>
</template>

<script>
import GrandSonView from "@/components/example/GrandSonView";
export default {
  name: "SonView",
  components: {GrandSonView},
  provide(){
    return {
      count: 10,
    }
  },
}
</script>

<style scoped>

</style>

从结果得知，inject参数有一个靠近原则，就是说子组件向上一层层的找相关的参数，如果最近一层的父组件有这个参数，那么它便不再往上层查找了。