inject 响应式_vue 的 provide 和 inject 依赖注入与 $parent

依赖注入还是有负面影响的。它将你的应用以目前的组件组织方式耦合了起来，使重构变得更加困难。同时所提供的属性是非响应式的。这是出于设计的考虑，因为使用它们来创建一个中心化规模化的数据跟使用$root做这件事都是不够好的。如果你想要共享的这个属性是你的应用特有的，而不是通用化的，或者如果你想在祖先组件中更新所提供的数据，那么这意味着你可能需要换用一个像Vuex这样真正的状态管理方案了。

话不多说，上代码解释：

在这个组件里，所有的后代都需要访问根组件的一个getchildrenNode方法，以便知道要跟那个子级进行交互。不幸的是，使用$parent属性无法很好的扩展到更深层级的嵌套组件上。此时用到了两个新的实例选项：provide和inject。

provide选项允许我们指定我们想要提供给后代组件的数据/方法。在这个例子中，就是内部的getchildrenNode方法：

父组件：

provide: function () {

return {

getchildrenNode: this.getchildrenNode

}

然后在任何后代组件里，我们都可以使用inject选项来接收指定的我们想要添加在这个实例上的属性：

子组件：

inject: ['getchildrenNode']

相比$parent来说，这个用法可以让我们在任意后代组件中访问getchildrenNode，而不需要暴露整个实例。这允许我们更好的持续研发该组件，而不需要担心我们可能会改变/移除一些子组件依赖的东西。同时这些组件之间的接口是始终明确定义的，就和props一样。

实际上，你可以把依赖注入看作一部分“大范围有效的 prop”，除了：祖先组件不需要知道哪些后代组件使用它提供的属性

后代组件不需要知道被注入的属性来自哪里

inject 响应式_vue 的 provide 和 inject 依赖注入与 $parent相关推荐

inject 响应式_Vue 3 组合式 provide/inject
组合式提供与注入在之前的章节,我们讲了选项式的提供与注入,今天我们继续讲组合式提供与注入. 我们也可以在组合式 API 中使用 provide/inject.两者都只能在当前活动实例的 setup ...
vue 中provide的用法_vue中provide和inject的用法
2.2.0 新增描述: provide 和 inject 主要为高阶插件/组件库提供用例.并不推荐直接用于应用程序代码中; 并且这对选项需要一起使用; 以允许一个祖先组件向其所有子孙后代注入一个依赖 ...
vue 中provide的用法_vue中provide和inject使用
1.provide/inject有什么用? 常用的父子组件通信方式都是父组件绑定要传递给子组件的数据,子组件通过props属性接收,一旦组件层级变多时,采用这种方式一级一级传递值非常麻烦,而且代码可读 ...
VUE2中provide 和 inject用法,以及怎么做响应式数据?
1. provide/inject说明 provide 和 inject, 用来实现实现跨组件之间通信. 父子/孙子组件之间任意通信. 在祖先组件中通过provide注入一个依赖,不论组件层次有多深, ...
vue3中 provide 和 inject 用法
前言: 在父子组件传递数据时,通常使用的是 props 和 emit,父传子时,使用的是 props,如果是父组件传孙组件时,就需要先传给子组件,子组件再传给孙组件,如果多个子组件或多个孙组件使用时, ...
vue 3 学习笔记 (八)——provide 和 inject 用法及原理
在父子组件传递数据时,通常使用的是 props 和 emit,父传子时,使用的是 props,如果是父组件传孙组件时,就需要先传给子组件,子组件再传给孙组件,如果多个子组件或多个孙组件使用时,就需要传 ...
provide和inject 用法
这对选项需要一起使用,以允许一个祖先组件向其所有子孙后代注入一个依赖,不论组件层次有多深,并在起上下游关系成立的斜体样式时间里始终生效. 使用场景:由于vue有$parent属性可以让子组件访问父组件 ...
关于组件之间使用provide和inject传值
1.在写项目的时候,由于组件封装的层次超过了两层,因而想起了用provide和inject传值的方式.provide和inject都是与data.methods.钩子函数同级,千万不要写错!! 基础用 ...
【Vue.js源码解析一】-- 响应式原理
前言笔记来源:拉勾教育大前端高薪训练营阅读建议:建议通过左侧导航栏进行阅读课程目标 Vue.js 的静态成员和实例成员初始化过程首次渲染的过程数据响应式原理 – 最核心的特性之一准备工作 ...

inject 响应式_vue 的 provide 和 inject 依赖注入与 $parent

inject 响应式_vue 的 provide 和 inject 依赖注入与 $parent相关推荐

最新文章

热门文章