
Vue2之使用provide与inject传递数据案例
vue
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
项目地址:https://gitcode.com/gh_mirrors/vu/vue

·
Vue2之使用provide与inject传递数据案例
在Vue 2中,
provide
和inject
是一对用于在组件树中传递数据的高级选项。它们允许祖先组件向其所有子孙后代组件提供数据,而无需显式地通过 props 或事件进行传递。
provide
选项是在祖先组件中声明的,它接受一个对象,其中包含您希望提供给后代组件的数据。通常,您会在父组件的provide
选项中设置这些数据。inject
选项是在后代组件中声明的,它接受一个数组或一个对象。如果是数组,它列出了要注入的属性名称。如果是对象,则键是本地绑定的名称,而值是要注入的 prop 名称或包含了 from 和 default 字段的对象
1. 祖先组件使用provide提供数据
在
Parent.vue
中通过provide
提供提供数据
export default {
//提供数据,注意:这里提供数据与提供方法写法是有区别的,提供数据provide是对象,而提供方法时provide是函数,且提供的方法必须写在return对象中
provide: {
message: 'Hello World!',
count: 2
}
}
2. 后代组件使用inject注入并使用数据
在后代组件
Child.vue
中使用inject
来获取父组件提供的数据
// Child.vue
export default {
//注入祖先组件提供的数据
inject: ['message', 'count'],
mounted() {
console.log(this.message); // 输出: Hello World!!
console.log(this.count); // 输出: 2
}
}
3. 注意事项
provide
和inject
绑定不是响应式的。这意味着当提供的值发生更改时,后代组件不会自动重新渲染。- 使用
provide
和inject
需要谨慎,因为它会创建祖先和后代之间的紧密耦合,增加了组件的复杂性。通常建议仅在共享全局状态时使用。 - 要注意命名冲突。因为
provide
提供的值是在整个组件树中全局可用的,所以确保键值不会与其他组件中的键值冲突。
在大型应用程序中,provide
和 inject
可以帮助您更方便地管理状态和共享数据,但请确保正确使用,以避免意外行为。




vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:5 个月前 )
9e887079
[skip ci] 4 个月前
73486cb5
* chore: fix link broken
Signed-off-by: snoppy <michaleli@foxmail.com>
* Update packages/template-compiler/README.md [skip ci]
---------
Signed-off-by: snoppy <michaleli@foxmail.com>
Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 7 个月前
更多推荐
所有评论(0)