vue3provider和inject使用
时间: 2023-09-02 12:11:26 浏览: 141
在Vue3中,我们可以使用`provide`和`inject`函数来实现组件之间的数据传递。在`setup`函数中使用`provide`来提供变量,然后在子组件中使用`inject`来注入变量。
示例代码如下:
```
// 父组件
import { provide } from 'vue';
export default {
setup() {
const msg = 'Hello';
provide('msg', msg);
}
}
// 子组件
import { inject } from 'vue';
export default {
setup() {
const msg = inject('msg');
console.log(msg); // 输出:Hello
}
}
```
在父组件的`setup`函数中使用`provide`来提供变量,可以是一个常量也可以是一个响应式对象。在子组件的`setup`函数中使用`inject`来注入变量,可以获取到父组件提供的值。
另外,需要注意的是,`provide`和`inject`只在当前组件及其子组件中生效,在父组件生效的生命周期内,这个变量就一直有效。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* [vue3中的provide和inject](https://blog.csdn.net/weixin_47450807/article/details/122925805)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
- *2* *3* [【Vue】provider/inject 祖孙传值](https://blog.csdn.net/qq_45677671/article/details/126058373)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]
阅读全文
相关推荐


















