VUE3初学者入门：使用provide / inject实现组件之间的共享-Vue.js-PHP中文网

VUE3初学者入门：使用provide / inject实现组件之间的共享

WBOY

发布： 2023-06-16 08:34:36

原创

2052人浏览过

vue是一款现代的前端框架，具有易用性高、灵活性强、性能优异等优点，越来越受到前端开发者的欢迎和青睐。而vue3版本带来了更加出色的性能和更加优秀的架构设计，更具有用户友好性。vue3中，提供了一种新的方式来实现组件之间共享数据的功能——provide / inject。本文将详细介绍provide / inject的用法和实现过程。

概述

provide / inject是VUE3官方推荐的一种实现组件之间共享数据的方法。而在VUE2中，我们常常通过props / $emit和Vuex等方式来实现组件之间的数据通信。而provide / inject的最大特点在于，它以一种更加隐式的方式来实现数据共享，使得代码更具有可读性和易维护性。

provide / inject的用法

provide / inject的使用方法非常简单，下面是几个例子：

父组件提供数据

<template>
  <child-component />
</template>

<script>
import { provide } from 'vue'
import ChildComponent from './ChildComponent.vue'

export default {
  components: { ChildComponent },
  setup() {
    provide('message', 'Hello from parent')
  }
}
</script>

登录后复制

在父组件中，我们通过provide方法来提供了一个名为message的数据，并将其值设为'Hello from parent'。接着，我们可以在子组件中使用inject来获取这个数据：

<template>
  <div>{{ message }}</div>
</template>

<script>
import { inject } from 'vue'

export default {
  setup() {
    const message = inject('message')
    return { message }
  }
}
</script>

登录后复制

在子组件中，我们通过inject方法来获取名为message的数据，此时我们就能够在模板中使用这个数据了。

立即学习“前端免费学习笔记（深入）”；

子组件提供数据

<template>
  <child-component />
</template>

<script>
import { ref } from 'vue'
import ChildComponent from './ChildComponent.vue'

export default {
  components: { ChildComponent },
  setup() {
    const message = ref('Hello from parent')
    return { message }
  },
  provide: {
    message: this.message
  }
}
</script>

登录后复制

在这个例子中，我们在父组件中定义了一个名为message的响应式数据，并将其值设为'Hello from parent'。我们接着通过 provide 方法将该数据提供给子组件。在子组件中我们通过 inject 方法获取 message，并在模板中使用它：

秘塔写作猫

秘塔写作猫是一个集AI写作、校对、润色、配图等为一体的创作平台

127

查看详情

<template>
  <div>{{ message }}</div>
</template>

<script>
import { inject } from 'vue'

export default {
  setup() {
    const message = inject('message')
    return { message }
  }
}
</script>

登录后复制

注意，这里我们定义的 message 数据是响应式的。

provide / inject的实现过程

provide / inject的实现方式依赖于VUE3中全新的响应系统。在VUE3中，provide / inject 依赖provideParent / injectSetupRef来工作。provideParent 函数和 provide 方法类似，都接收一个数据的键名和值，而injectSetupRef则是用来从父组件获取数据的。具体实现过程如下：

// provide函数
export function provide(key, value) {
  const vm = getCurrentInstance();
  if (!vm) {
    console.warn(`provide() can only be used inside setup().`);
  } else {
    let provides  = vm.provides;
    const parent = vm.parent;
    if (provides === EMPTY_OBJ) provides = vm.provides = Object.create(parent.provides);
    provides[key] = value;
  }
}

// inject函数
export function inject(key, defaultValue) {
  const vm = getCurrentInstance();
  if (vm) {
    const provides = vm.parent.provides;
    if (key in provides) {
      return provides[key];
    } else if (arguments.length > 1) {
      return defaultValue;
    } else {
      console.warn(`injection "${String(key)}" not found.`);
    }
  } else {
    console.warn(`inject() can only be used inside setup() or functional components.`);
  }
}

登录后复制

在provide函数中，我们通过getCurrentInstance函数获取当前实例，并将提供的数据存储在当前实例的provides对象上。如果当前实例不存在，则说明这个provide函数不在setup函数中被调用，并返回警告信息。

而在inject函数中，我们同样通过getCurrentInstance函数获取当前实例，并从其父组件的provides对象上获取key对应的值。如果key对应的值不存在，则返回defaultValue。如果当前实例不存在，则说明这个inject函数没有在setup函数或函数式组件中被调用，并返回警告信息。

总结

通过本文的介绍，我们可以知道provide / inject是一种优秀的实现VUE3组件之间共享数据的方法。它以一种更加隐式的方式来实现数据共享，使得代码更具有可读性和易维护性。在使用过程中需要注意提供的数据是响应式且可以在嵌套组件中使用。同时，需要注意如果我们提供的数据并不存在于 provide 中，那么会使用arguments[1]中传递的参数作为默认值，此时需要时刻注意参数的类型和值。

以上就是VUE3初学者入门：使用provide / inject实现组件之间的共享的详细内容，更多请关注php中文网其它相关文章！