美文网首页
vue组件通信---provide / inject方式

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

作者: 三七_小九 | 来源:发表于2020-10-20 16:03 被阅读0次

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

    具体实现:

        父组件:

        子组件:

        

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

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

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

    相关文章

      网友评论

          本文标题:vue组件通信---provide / inject方式

          本文链接:https://www.haomeiwen.com/subject/iwedmktx.html