vue组件通信---provide / inject方式

背景:
    在公司开发的组件库中,组件之间的共享值使使用vuex的方式,这种方法严重依赖了vuex,在组件使用的时候有需要把vuex的实例传递进去创建组件需要的vuex状态。在重构组件时候,明确目标就是:组件库不能依赖于vuex传递值。于是想到了最原始的方法props和$emit的方式去传递值,这种方法在组件层级不深时候是很方便的,但是组件层级太深,有会使props和触发事件的链路过长。就目前来言初步定下provide / inject方式做到组件共享状态值。

具体实现:

    父组件:


    子组件:

    

注意:provide 和 inject 绑定并不是可响应的,所以可以在provide 将注入的值写成一个响应式的对象

            写成响应式对象的形式:(这样provide 改变了 inject 的组件也会跟着响应)

参考code:https://github.com/wxStart/vueTestCode/tree/provide_inject 测试代码地址

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

友情链接更多精彩内容