vue3 provide与inject（一）

2023-05-22 09:27:11 浏览数 (1)

在Vue 3中，provide和inject是一对用于父组件向子组件传递数据的高级选项。provide用于在父组件中定义要传递的数据，而inject用于在子组件中接收这些数据。它们提供了一种跨组件层次进行数据传递的方式，方便在组件之间共享数据。

provide和inject的使用

provide的使用

在父组件中，你可以使用provide选项来定义要传递的数据。这些数据可以是基本类型、对象、函数或响应式的数据。

下面是一个示例，演示了如何在父组件中使用provide：

代码语言：javascript复制

<template>
  <div>
    <h1>父组件</h1>
    <button @click="changeValue">改变值</button>
    <child-component></child-component>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  setup() {
    const value = ref('初始值');

    const changeValue = () => {
      value.value = '新值';
    };

    provide('sharedValue', value);

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

在上面的示例中，父组件中定义了一个value变量，它是一个响应式的数据。通过provide('sharedValue', value)，我们将value以名称sharedValue提供给子组件。

0 人点赞