提供和注入让我们可以将数据放在应用程序结构中较低的任何位置。 让我们看看它们是如何工作的。

在 Vue 中为子元素提供/给予道具或属性很容易。 Vue 中的属性是我们将数据从父元素或 Vue 模板传递到子元素的主要方式之一。 例如，在下面的代码中，我们为子元素 PopularList 赋予属性名称，并将其设置为 Most Popular Posts。 这意味着 PopularList 现在可以访问数据 Most Popular Posts：

但是，有时子元素可以包含其他子元素。 如果我们想将数据从父组件传递到孙组件，更简单的方法是使用提供/注入。 这让我们可以在父级别提供数据，并在低于该级别的任何级别注入数据。

这意味着如果我们有一个不被孩子使用但被孙子使用的属性，我们不必不必要地将它传递给两者，比如 Parent → Child → GrandChild - 我们可以简单地将它传递为 Parent → 孙子，如下图所示：

Vue中如何使用provide和inject

如果您使用的是组合 API，则可以使用 provide 函数提供任何数据集：

provide 有一个键和一个值 - 上面，键是 myKey，值是消息。 与 props 一样，它可以是对象、数字或任何其他有效类型。 我们还可以使这个属性成为反应性的，所以它通过使用 ref 函数在孙元素中保持最新：

如果您改用 Options API，则可以使用以下结构在组件中提供数据：

export default {    provide: {        myKey: 'message'    }}

如果你想在提供选项 API 版本的反应性，你必须使用计算。 因此，组合 API 更易于与提供/注入一起使用。 如果我们给出任何实例状态，我们还需要使用 provide() 表示法，即数据来自 data() 函数的位置。

export default {    data() {        return {            message: 'message'        }    },    provide() {        return {            // This sets `myKey` to the message property from data().            // Putting it in `computed()` makes it reactive.            myKey: computed(() => this.message)        }    }}

现在我们已经提供了数据，可以使用注入函数在任何级别的任何子组件中访问它。

在 Vue 中使用注入访问父数据

现在我们已经在组件中定义了提供，您可以使用注入访问该数据。 在子组件或孙子组件中，我们可以访问 myKey 来引用消息。 例如，假设我们有一个如下所示的 Vue 组件：

......然后是一个看起来像这样的子元素（Child.vue）：

在 GrandChildElement 中，我们可以访问 myKey，因为我们在父级中提供了它。 我们也可以在 Child.vue 中这样做，但我们也可以只使用道具。 provide 使我们能够从多个级别获取数据。 要在 GrandChildElement 中访问这些数据，我们使用注入。 我们的 GrandChildElement.vue 文件可能看起来像这样：

此处的 const message 将返回文本消息，因为这是我们将 myKey 设置为提供的内容。 如果您使用的是 Options API，则可以改为：

export default {    inject: [ 'myKey' ],    created() {        // Can access this.myKey here    }}

现在 myKey 的值可供孙组件使用，而无需先通过 props 将其传递给子组件。

关注七爪网，获取更多APP/小程序/网站源码资源！