Vue3 provide Function

Vue3 选项式 APIVue3 Options API

provideThe function is a higher-order function provided by Vue3, used to pass data from parent components to child components in the component tree. Compared with traditionalpropscompared,provideandinjectit provides a more flexible way to share data, especially when the component hierarchy is deep.

Usingprovidethe function, the parent component can expose some data or methods to the child component through it, and the child component can throughinjectthe function to receive this data or methods.

Basic Usage of the provide Function

Below is a simple example that shows how to useprovidethe function to provide data in the parent component, and in the child component throughinjectthe function to receive data.

Parent Component

Example

<template>
  <div>
    <ChildComponent />
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  setup() {
    const message = 'Hello from Parent!';
    provide('message', message);
  }
};
</script>

Child Component

Example

<template>
  <div>
    <p>{{ injectedMessage }}</p>
  </div>
</template>

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

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

In this example, the parent component throughprovidethe function passes a stringmessage, and the child component throughinjectthe function receives and displays this message.

Advanced Usage of the provide Function

provideThe function can not only pass simple data, but also methods, objects, and even reactive data. This makes it very useful in complex application scenarios.

Passing Reactive Data

In Vue3, we can usereforreactiveto create reactive data, and pass it throughprovidethe function to the child component.

Example

<template>
  <div>
    <ChildComponent />
  </div>
</template>

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

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

    provide('state', state);

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

In the child component, we can throughinjectthe function to get this reactive object and operate on it.

Example

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

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

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

Notes on the provide Function

When usingprovidethe function, you need to note the following points:

1. Naming Conflicts

When usingprovideandinject, if multiple parent components provide data with the same name, the child component will receive the data provided by the nearest parent component. Therefore, to avoid naming conflicts, it is recommended to use unique names.

2. Handling Reactive Data

When passing reactive data, the child component can directly modify this data. If you want the child component to only read data without modifying it, you can usereadonlythe function to wrap reactive data.

Example

import { provide, reactive, readonly } from 'vue';

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

    provide('state', readonly(state));
  }
};

Vue3 选项式 APIVue3 Options API

Other Extensions