虚位以待(AD)
虚位以待(AD)
首页 > 网页特效 > JavaScript > 详解Vue 多级组件透传新方法provide/inject

详解Vue 多级组件透传新方法provide/inject
类别:JavaScript   作者:码皇   来源:互联网   点击:

这篇文章主要介绍了详解Vue 多级组件透传新方法provide inject,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

provide / inject 是 2.2 新增的方法,可以以一个祖先组件向所有子孙后代注入依赖(一个内容)。

provider/inject:简单的来说就是在父组件中通过provider来提供变量,然后在子组件中通过inject来注入变量。

Vue 官方警告:

provide 和 inject 主要为高阶插件/组件库提供用例。并不推荐直接用于应用程序代码中。

当然,警告只是警告,你完全可以正常使用。

使用方法非常像 data 和 props 的组合大礼包:

    var Provider = {
    provide: {
    foo: 'bar' }
    , // ...}
    var Child = {
    inject: ['foo'], created () {
    console.log(this.foo) // => "bar" }
    // ...}

唯一的区别是你不用再一层层的传入了,过去用的 event-bus 虽然可以解决深层问题,但是会导致整个 event-emit 组成过于混乱,难以维护。使用 provide / inject 可以保证父子单向数据流的清晰性。

在 React 中 Context 的 Provider / Consumer 也有相同的效果,由于还没有具体使用过,对 React 本身也只有一面之缘,留待以后在了解,感兴趣的同学可以 阅读文档 了解。

参考文章:

Vue 官方文档
Provide/Inject in Vue 2.2

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

您可能感兴趣的文章:

  • vue中的provide/inject的学习使用
相关热词搜索: vue provide inject provide inject