前端面试准备2-vue-使用provide和inject实现子组件向父级组件传值

在 Vue 3 中，provide 和 inject 主要用于 父组件向子组件传递数据，而不是子组件向父组件传递数据。但可以通过传递一个 响应式对象 或 函数，实现子组件向父组件传值。

示例：传递响应式对象

父组件

vue

复制

<template>
  <div>
    <ChildComponent />
    <p>父组件接收到的值：{{ value }}</p>
  </div>
</template>

<script setup>
import { ref, provide } from 'vue';
import ChildComponent from './ChildComponent.vue';

const value = ref('');

// 提供一个响应式对象
provide('value', value);
</script>

子组件

vue

复制

<template>
  <button @click="updateValue">更新父组件的值</button>
</template>

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

// 注入父组件提供的响应式对象
const value = inject('value');

function updateValue() {
  value.value = 'Hello from Child';
}
</script>

解释：

1. 父组件通过 provide 提供一个响应式对象 value。
2. 子组件通过 inject 注入 value，并修改其值。
3. 由于 value 是响应式的，父组件会同步更新。

---

示例：传递函数

父组件

vue

复制

<template>
  <div>
    <ChildComponent />
    <p>父组件接收到的值：{{ value }}</p>
  </div>
</template>

<script setup>
import { ref, provide } from 'vue';
import ChildComponent from './ChildComponent.vue';

const value = ref('');

// 提供一个函数，用于更新值
provide('updateValue', (newValue) => {
  value.value = newValue;
});
</script>

子组件

vue

复制

<template>
  <button @click="sendValue">更新父组件的值</button>
</template>

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

// 注入父组件提供的函数
const updateValue = inject('updateValue');

function sendValue() {
  updateValue('Hello from Child');
}
</script>

解释：

1. 父组件通过 provide 提供一个函数 updateValue，用于更新 value。
2. 子组件通过 inject 注入 updateValue，并调用该函数更新父组件的值。