当前位置： 首页 > Web前端 > vue.js

Vue.js3.x跨层组件之间如何传递数据？

时间：2023-04-01 11:57:17 vue.js

provide/inject基本用法在Vue.js中，如果跨层组件想要传递数据，我们可以直接使用props将祖先组件的数据传递给后代组件：注：上图来自Vue.js官方网站：道具钻井。如上图所示，中间组件

可能根本不需要这些props，但是为了让能够访问到这些props，
仍然需要定义这些props并进行传递。有人说我们可以用$attrs/$listeners，但是还是要经过中间层，而且用Vuex太麻烦，EventBus容易导致逻辑分散，问题很难定位。那么，有没有其他方法可以将数据直接从祖先组件传递给后代组件呢？答案是提供/注入。祖先组件：//Root.vueoffspringComponent://DeepChild.vue为具体用法见：Provide/Inject。现在，问题解决了：注：上图来自Vue.js官网：PropDrilling。提供这么神奇的东西，它是如何实现的呢？exportfunctionprovide(key:InjectionKey|string|number,value:T){让provides=currentInstance.providesconstparentProvides=currentInstance.parent&¤tInstance.parent.providesif(parentProvides===provides){provides=currentInstance.provides=Object.create(parentProvides)}provides[keyasstring]=value}默认情况下，组件实例的提供继承自其父组件。但是当组件实例需要提供自己的值时，它会使用父组件的provides对象作为原型来创建自己的provides对象。这样我们在使用inject的时候，就可以通过原型链找到父组件提供的数据。inject的实现原理inject的代码也很简单，简单到看完就会得出一句话：exportfunctioninject(key:InjectionKey|string,defaultValue?:unknown,treatDefaultAsFactory=false){常量实例=currentInstance||currentRenderingInstanceif(instance){//#2400//支持`app.use`插件，//如果实例位于根目录，则回退到appContext的`provides`constprovides=instance.parent==null?instance.vnode.appContext&&instance.vnode.appContext.provides：instance.parent.providesif(provides&&(keyasstring|symbol)inprovides){returnprovides[keyasstring]}elseif(arguments.length>1){返回treatDefaultAsFactory&&isFunction(defaultValue)？defaultValue.call(instance.proxy):defaultValue}}}inject主要有两个作用：通过in操作获取父组件的数据，in操作会遍历原型链。这就是上面provide的实现，为什么组件需要使用父组件的provides对象作为原型来创建自己的provides对象，就是为了实现inject的默认值功能。inject的第二个参数是默认值。一句话总结：provide/inject使用原型链实现跨层级组件的数据传递

Vue.js3.x跨层组件之间如何传递数据？相关文章
最新推荐
猜你喜欢

Copyright © 2012-2022 程序源 版权所有豫ICP备2022028201号

重要申明：本站所有的文章、图片、评论等，均由网友发表或上传并维护或收集自网络，属个人行为，与本站立场无关。 如果侵犯了您的权利，请与我们联系，我们将在24小时内进行处理、任何非本站因素导致的法律后果，本站均不负任何责任。