YouTip{{ injectedMessage }}
Count: {{ state.count }}
Vue3 Api Provide
* * Vue3 Options API](#)
The `provide` function is a higher-order function provided by Vue3, used to pass data from a parent component to child components in the component tree. Compared to traditional `props`, `provide` and `inject` offer a more flexible way to share data, especially when the component hierarchy is deep.
When using the `provide` function, a parent component can expose some data or methods to its child components, and the child components can then receive this data or methods via the `inject` function.
* * *
## Basic Usage of the provide Function
Here is a simple example demonstrating how to use the `provide` function in a parent component to provide data, and how a child component receives this data via the `inject` function.
### Parent Component
## Example
import { provide } from 'vue';
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent
},
setup() {
const message = 'Hello from Parent!';
provide('message', message);
}
};
### Child Component
## Example
import { inject } from 'vue';
export default {
setup() {
const injectedMessage = inject('message');
return {
injectedMessage
};
}
};
In this example, the parent component passes a string `message` via the `provide` function, and the child component receives and displays this message via the `inject` function.
* * *
## Advanced Usage of the provide Function
The `provide` function can pass not only 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 use `ref` or `reactive` to create reactive data and pass it to child components via the `provide` function.
## Example
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
};
}
};
In the child component, we can retrieve this reactive object via the `inject` function and perform operations on it.
## Example
import { inject } from 'vue';
export default {
setup() {
const state = inject('state');
return {
state
};
}
};
* * *
## Notes on Using the provide Function
When using the `provide` function, the following points should be noted:
### 1. Naming Conflicts
When using `provide` and `inject`, 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, child components can directly modify this data. If you want the child component to only read the data and not modify it, you can wrap the reactive data with the `readonly` function.
## Example
import { provide, reactive, readonly } from 'vue';
export default {
setup() {
const state = reactive({
count: 0
});
provide('state', readonly(state));
}
};
* * Vue3 Options API](#)