vue3provider和inject使用

在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 ]