vue单文件组件中provide/inject用于祖先向后代跨层级传递响应式数据，避免props逐层透传；祖先用provide提供reactive或ref数据，后代用inject获取并保持响应性，需注意命名冲突与默认值设置。
Vue 单文件组件中使用 provide 与 inject，核心是让祖先组件“提供”数据，任意后代组件“注入”使用，跳过中间层级。它不替代 props，而是专治深层嵌套时的传值冗余问题。
祖先组件怎么写 provide
在祖先组件（比如 Layout、App 或某个父级业务组件）的 setup() 或选项式 API 中声明 provide：
- 组合式 API（Vue 3 推荐）：必须先从 vue 导入
provide，且只能在setup()内调用 - 选项式 API：可直接写为对象，但如果要访问
this（如 data、computed），必须写成函数形式，否则拿不到响应式数据 - 推荐始终用函数写法，避免踩坑。例如：
<script><br>import { provide } from 'vue'<br>export default {<br> setup() {<br> const theme = { color: 'blue', fontSize: '14px' }<br> provide('theme', theme)<br> return {}<br> }<br>}<br></script>
后代组件怎么写 inject
在任意子孙组件中，通过 inject 获取数据。同样分两种写法：
vue-composition-api-best-practices
Vue 3 组合式 API 与
热门下载
相关下载
精品课程
相关推荐
/
热门推荐
/
最新课程
最新文章