vue3 inject用法

在Vue3中，`inject`方法是用于从父组件中提供的数据中获取值的。使用`inject`方法需要在子组件的`setup`函数中调用，并且需要在使用之前从Vue中导入`inject`方法。

下面是一个使用`provide`和`inject`的完整示例：

// 父组件代码
<script>
import { provide } from "vue"

export default {
  setup() {
    provide('info', "值")
  }
}
</script>

// 子组件代码
<template>
  {{ info }}
</template>

<script>
import { inject } from "vue"

export default {
  setup() {
    const info = inject('info')

    return {
      info
    }
  }
}
</script>

在父组件中，使用`provide`方法提供了一个名为`info`的值。在子组件中，使用`inject`方法获取了父组件中提供的`info`的值，并将其赋值给子组件的`info`变量。这样，子组件就可以使用父组件提供的值了。

需要注意的是，`inject`返回的值是响应式的，这意味着如果父组件中的`info`值发生变化，子组件中的`info`也会自动更新。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *2* *3* [vue 3 学习笔记 (八)——provide 和 inject 用法及原理](https://blog.csdn.net/weixin_43880397/article/details/121552232)[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: 100%"]
[ .reference_list ]