vue3provide/inject使用
时间: 2024-08-16 20:04:39 浏览: 29
Vue3中的`provide`和`inject`是用于组件间数据传递的特性,它们属于单向数据流设计模式的一部分,主要用于解决组件树层级之间依赖的问题。`provide`通常由父组件使用,用来声明共享的数据或服务,而`inject`则在子组件中使用,用于接收这些提供。
1. **Provide**:
- 在父组件中,你可以通过`this.$provide`来创建一个提供项,如`this.$provide['myService'] = { data: 'Hello' }`,这样就创建了一个名为`myService`的服务,并赋予其`data`属性值。
2. **Inject**:
- 子组件可以使用`@inject`装饰器从其父组件或其他提供者那里注入需要的数据,例如`:inject=['myService']`。然后,在组件的setup钩子函数中,你可以通过`this.myService`访问到提供的服务。
举个例子:
```vue
// 父组件 App.vue
<template>
<ChildComponent />
</template>
<script setup>
import ChildComponent from './ChildComponent.vue'
const myService = { message: 'Hi from parent' }
provide('myService', myService)
</script>
```
```vue
// 子组件 ChildComponent.vue
<template>
<div>{{ myMessage }}</div>
</template>
<script setup>
import { inject } from 'vue'
// 注入 'myService'
const myService = inject('myService')
setup() {
// 访问并使用提供的数据
const myMessage = myService.message
}
</script>
```
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![-](https://img-home.csdnimg.cn/images/20210720083327.png)
![-](https://img-home.csdnimg.cn/images/20210720083327.png)
![-](https://img-home.csdnimg.cn/images/20210720083327.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)