您现在的位置是：首页 >技术交流 >VueUse 是怎么封装Vue3 Provide/Inject 的？网站首页技术交流

VueUse 是一个 Vue 3 的实用工具库，它提供了一系列的组合式函数（Composables），帮助开发者更方便地使用 Vue 3 的各种功能。其中，useProvide 和 useInject 是用于封装 Vue 3 的 provide 和 inject 功能的组合式函数。

provide 和 inject 简介

在 Vue 3 中，provide 和 inject 用于在组件树中传递数据，而不需要通过 props 逐层传递。这在大型应用中非常有用，可以减少 prop 钻透的问题。

VueUse 的 useProvide 和 useInject

useProvide

useProvide 用于在父组件中提供数据。

import { provide } from 'vue';
import { useProvide } from '@vueuse/core';

export default {
  setup() {
    const state = reactive({
      count: 0
    });

    // 使用 useProvide 提供数据
    useProvide('state', state);

    // 或者直接使用 provide
    provide('state', state);

    return {
      state
    };
  }
};

useInject

useInject 用于在子组件中注入数据。

import { inject } from 'vue';
import { useInject } from '@vueuse/core';

export default {
  setup() {
    // 使用 useInject 注入数据
    const state = useInject('state');

    // 或者直接使用 inject
    const state = inject('state');

    return {
      state
    };
  }
};

示例代码

假设我们有一个父组件 ParentComponent 和一个子组件 ChildComponent，我们希望在父组件中提供一个状态，并在子组件中注入这个状态。

父组件 ParentComponent

<template>
  <div>
    <p>Count: {
  
  { state.count }}</p>
    <button @click="increment">Increment</button>
    <ChildComponent />
  </div>
</template>

<script>
import { reactive, provide } from 'vue';
import { useProvide } from '@vueuse/core';
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  setup() {
    const state = reactive({
      count: 0
    });

    const increment = () => {
      state.count++;
    };

    // 使用 useProvide 提供数据
    useProvide('state', state);

    return {
      state,
      increment
    };
  }
};
</script>

子组件 ChildComponent

<template>
  <div>
    <p>Injected Count: {
  
  { state.count }}</p>
  </div>
</template>

<script>
import { inject } from 'vue';
import { useInject } from '@vueuse/core';

export default {
  setup() {
    // 使用 useInject 注入数据
    const state = useInject('state');

    return {
      state
    };
  }
};
</script>

总结

• useProvide 和 useInject 是 VueUse 提供的组合式函数，用于封装 Vue 3 的 provide 和 inject 功能。
• useProvide 用于在父组件中提供数据。
• useInject 用于在子组件中注入数据。
• 这些组合式函数使得在组件树中传递数据变得更加简单和直观。