Vue中provide、inject详解以及使用教程

Vue中provide、inject详解以及使用教程

在Vue的组件嵌套过程中，往往需要在祖先组件中定义一些属性或变量，然后在子组件中使用。虽然可以通过props传递数据来解决问题，但是当组件嵌套层级变多时，props的传递会很繁琐。在这种情况下，Vue中的provide、inject就可以派上用场了。

provide、inject是什么？

provide和inject是Vue中用来解决祖先组件向子孙组件传递数据的API。

• provide：它是一个对象或一个函数，用来定义需要向后代组件提供的数据。这个数据会被所有的后代组件所共享。
• inject：它是一个字符串数组或一个对象，用来指定需要从父级组件中注入的属性名。在使用时，必须在组件中声明这些注入的属性，它们的值就是祖先组件provide中对应的属性值。

provide的使用

下面是一个简单的provide示例。我们先定义一个名为“App”的根组件，并在该组件中定义provide方法，提供一个名为“username”的数据。最后在App的后代组件中使用这个数据。

<!-- App.vue -->
<template>
  <div id="app">
    <h1>{{title}}</h1>
    <child></child>
  </div>
</template>

<script>
  import Child from './components/Child'

  export default {
    name: 'App',
    provide() {
      return {
        username: 'Vue User'
      }
    },
    components: {
      Child
    }
  }
</script>

<!-- 子组件 Child.vue -->
<template>
  <div>
    <p>子组件中获取到的provide数据</p>
    <p>用户名：{{username}}</p>
  </div>
</template>

<script>
export default {
  name: 'Child',
  inject: ['username']
}
</script>

在Child组件中，我们定义了一个名为“username”的注入属性，值为字符串“Vue User”。这个值正是来自于App组件提供的数据。因为provide提供的数据，在后代组件中都可以通过inject获取到。

inject的使用

除了上面提到的使用字符串数组来进行注入，也可以使用对象来进行注入。使用对象来进行注入的好处是可以为每个注入的属性指定一个别名。

下面是一个对象注入示例，这里我们将“username”改为“uname”进行注入。

<!-- App.vue -->
<template>
  <div id="app">
    <h1>{{title}}</h1>
    <child></child>
  </div>
</template>

<script>
  import Child from './components/Child'

  export default {
    name: 'App',
    provide() {
      return {
        username: 'Vue User'
      }
    },
    components: {
      Child
    }
  }
</script>

<!-- 子组件 Child.vue -->
<template>
  <div>
    <p>子组件中获取到的provide数据</p>
    <p>用户名：{{uname}}</p>
  </div>
</template>

<script>
export default {
  name: 'Child',
  inject: {
    uname: 'username'
  }
}
</script>

在Child组件中，我们依然用了注入属性“username”，但是起了个别名叫“uname”。这样我们就可以在模板中使用“{{uname}}”获得父组件提供的数据。

总结

在组件嵌套较深、数据传递较为复杂的情况下，使用provide和inject就可以避免props层层传递的问题，从而让代码变得更加简单清晰。