浅析vue中的provide / inject 有什么用处

提供/注入（Provide / Inject）是Vue.js中的一个高级特性，允许祖先组件通过一个透明的接口向后代组件注入依赖项。在这个过程中，依赖注入是通过一个专用的上下文对象进行的。这种上下文对象作为依赖被传递到了需要访问依赖的子组件中。本攻略将介绍Vue中provide/inject的用处、使用方法以及示例说明。

使用方法

在祖先组件中，使用provide选项声明你想提供给后代的依赖。

export default {
  provide: {
    foo: 'this is a foo value',
  }
}

在后代组件中，通过inject选项来指定一个数组它所依赖的祖先组件的令牌（token）。

export default {
  inject: ['foo'],
  created() {
    console.log(this.foo)
  }
}

应用场景

provide/inject的主要作用就是将依赖项注入到需要的组件中，特别是那些深层次嵌套的组件，比如：

• 国际化，通过provide在最外层的组件中提供当前语言变量，在内部嵌套的子组件中可以通过inject来获取当前语言变量，而不需要每个组件都进行引用。
• 主题色，通过provide在最外层的组件中提供当前主题变量，在内部嵌套的子组件中可以通过inject来获取主题色变量，而不需要每个组件都进行引用。
• 数据请求，通过在根组件中使用provide来注入当前用户信息，然后在任何子组件中都可以通过inject来获取用户信息，而不需要每个组件都进行操作。

下面我们来看一下具体的实例：

Demo1:

在最外层的组件中为当前应用设置主题色，然后在嵌套的子组件中通过inject来使用主题色变量。

<!-- 根组件 -->
<template>
  <div :style="{color: themeColor}">
    <!-- 嵌套子组件 -->
    <app-child></app-child>
  </div>
</template>
<script>
import Child from './Child.vue'

export default {
  provide: {
    themeColor: 'red',
  },
  components: { Child },
}
</script>

<!-- 嵌套组件 -->
<template>
  <span>我是一个嵌套组件，当前主题色是{{themeColor}}</span>
</template>
<script>
export default {
  inject: ['themeColor'],
}
</script>

这个例子中，我们将应用的主题色定义在了根组件中，然后通过provide来向后代组件提供值。在嵌套子组件中，我们首先使用inject来声明依赖，然后在模板中就可以使用注入的数据了。

Demo2：

下面的实例中，我们通过 provide 和 inject 把 url 参数从 UsersIndex 传递到了 UsersShow 组件。

<!-- UsersIndex 组件 -->
<template>
  <div>
    <ul>
      <li v-for="user in users" :key="user.id">
        <router-link :to="{ name: 'users.show', params: { id: user.id }}" :url="user.url">{{ user.name }}</router-link>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      users: [
        { id: 1, name: '张三', url: 'https://jsonplaceholder.typicode.com/users/1' },
        { id: 2, name: '李四', url: 'https://jsonplaceholder.typicode.com/users/2' },
        { id: 3, name: '王五', url: 'https://jsonplaceholder.typicode.com/users/3' }
      ]
    }
  }
}
</script>

<!-- UsersShow 组件 -->
<template>
  <div>
    <span>{{ user.name }}</span>
    <a :href="url">{{ user.email }}</a>
  </div>
</template>

<script>
export default {
  inject: ['url'],
  computed: {
    user() {
      return this.$api.get(this.url).then(response => {
        return response.data
      })
    }
  }
}
</script>

这个例子非常简单，我们传递了用户的 url 参数，并用它实现了 users/show 页面的数据请求操作。其中，在 UsersIndex 组件中，我们使用 provide 方法将 url 参数提供给了后代组件 UsersShow，而在 UsersShow 组件中，我们使用 inject 方法将 url 参数注入到了子组件中。

这样做使得代码的可读性更高、容易维护。我们不需要在每个子组件中都手动引入 url 参数，而是通过 provide/inject 机制将参数传递给它们。