vue3 provide与inject的使用小技巧分享

下面就让我来详细讲解一下"vue3 provide与inject的使用小技巧分享"，并提供两个示例。

1. 什么是 provide 与 inject

provide 和 inject 是两个 Vue3 中提供的 API，用于实现祖先组件向子孙组件传递数据或者向其它组件提供数据。由于它们是成对使用的，因此在使用时需要同时使用两个API。

具体而言，provide 是定义一个数据提供源，它可以被一个或多个子组件访问。而 inject 是注入数据，并可以在组件内使用 provide 提供的数据。

2. 为什么要使用 provide 与 inject

使用 vue3 provide 与 inject，有以下几个优点：

• 无论嵌套多深，我们都可以轻松地将数据提供给任意组件，而不需要像 props 传递一样一级一级一层层地传递。
• 对于 Vue 2.x 中的 provide 和 inject 而言，提供的数据在父组件中改变时，子组件中的数据不会受到影响，而在 Vue 3.x 中，当祖先组件的数据更新时，后代组件中的数据也会同步更新，这样可以在一定程度上减少模板模块的层次，可以在麻烦的工具代码中更好地维护数据。
• 当需要跨级别进行组件交互时，采用 provide 和 inject 相对于 eventBus 更清晰、更高效些。

3. 使用示例

下面提供两个使用示例，来加深对 provide 与 inject 的理解。

示例一：祖先传递数据给后代

我们创建一个父组件，名为 Parent.vue，它提供了一个数值 data，子组件 Child.vue 可以直接访问。

<!-- Parent.vue -->
<template>
  <div>
    <h1>parent component</h1>
    <p>data: {{ data }}</p>
    <Child />
  </div>
</template>

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

export default {
  components: { Child },
  setup() {
    // 声明一个变量
    const data = 'Hello World';
    // 将 data 注入到祖先组件中
    provide('data', data);

    return {
      data,
    };
  },

};
</script>

<!-- Child.vue -->
<template>
  <div>
    <h2>child component</h2>
    <p>parent data: {{ parentData }}</p>
  </div>
</template>

<script>
import { inject } from 'vue';

export default {
  setup() {
    // 将祖先组件中名为 data 的数据注入到子组件中
    const parentData = inject('data');

    return {
      parentData,
    };
  },
};
</script>

在上述代码中，我们使用了 provide 将 data 在祖先组件中提供给了子孙组件，使用了 inject 在子孙组件中全局使用了该数据。

示例二：后代向祖先组件提交数据

我们创建一个子组件 Child.vue，我们需要将 input 中输入的数据，提交给祖先组件 Parent.vue 的 handleSubmit 方法中。

<!-- Parent.vue -->
<template>
  <div>
    <h1>parent component</h1>
    <Child />
  </div>
</template>

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

export default {
  components: { Child },
  setup() {
    const handleSubmit = (data) => {
      console.log(`submit data:`, data);
    };

    return {
      handleSubmit,
    };
  },
};
</script>

<!-- Child.vue -->
<template>
  <div>
    <h2>child component</h2>
    <input type="text" v-model="inputValue"/>
    <button @click="submitData">submit data to parent</button>
  </div>
</template>

<script>
import { inject } from 'vue';

export default {
  setup() {
    // 获取祖先组件的 handleSubmit 函数
    const handleSubmit = inject('handleSubmit');
    // 设置 input 双向绑定
    const inputValue = ref('');

    const submitData = () => {
      handleSubmit(inputValue.value);
      inputValue.value = ''; // 清空input数值
    };

    return {
      inputValue,
      submitData,
    };
  },
};
</script>

在上述代码中，我们使用了 inject 获取祖先组件的 handleSubmit 函数，将子组件中的数据通过 handleSubmit 方法提交给了祖先组件。

4. 结束语

使用 Vue3 中提供的 provide 和 inject，我们可以简单高效的在组件之间传递数据，也不需要考虑组件的内层结构，这使得我们可以更加轻松的重构代码且避免出现大量的 props 传递，在以后的 Vue3 开发中来避免冗余代码。