详解Vue 多级组件透传新方法provide/inject

 更新时间:2018年05月09日 09:04:11   作者:敖天羽  
这篇文章主要介绍了详解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高德地图绘制行政区边界功能

    vue高德地图绘制行政区边界功能

    这篇文章主要介绍了vue高德地图绘制行政区边界功能,本文通过实例代码给大家介绍的非常详细,感兴趣的朋友一起看看吧
    2024-03-03
  • vue-router 导航钩子的具体使用方法

    vue-router 导航钩子的具体使用方法

    本篇文章主要介绍了vue-router 导航钩子的具体使用方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-08-08
  • vue props使用typescript自定义类型的方法实例

    vue props使用typescript自定义类型的方法实例

    这篇文章主要给大家介绍了关于vue props使用typescript自定义类型的相关资料,文中通过实例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2023-01-01
  • vue中el-input绑定键盘按键(按键修饰符)

    vue中el-input绑定键盘按键(按键修饰符)

    这篇文章主要介绍了vue中el-input绑定键盘按键(按键修饰符),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-07-07
  • Vue3中defineEmits、defineProps 不用引入便直接用

    Vue3中defineEmits、defineProps 不用引入便直接用

    这篇文章主要介绍了Vue3中defineEmits、defineProps 不用引入便直接用,文章围绕主题展开详细的内容介绍,具有一定的参考价值,需要的小伙伴可以参考一下
    2022-09-09
  • 如何构建一个Vue插件并生成npm包

    如何构建一个Vue插件并生成npm包

    这篇文章主要介绍了如何构建一个Vue插件并生成npm包,帮助大家更好的理解和使用vue,方便以后的开发,感兴趣的朋友可以了解下
    2020-10-10
  • 关于在Vue中import和require的用法分析

    关于在Vue中import和require的用法分析

    在Vue项目中,我们经常需要引入外部的模块或文件,这时候就会用到import和require这两个关键字,本文将详细分析它们的用法,并提供具体的代码实例和解释,需要的朋友可以参考下
    2023-06-06
  • vue 实现强制类型转换 数字类型转为字符串

    vue 实现强制类型转换 数字类型转为字符串

    今天小编就为大家分享一篇vue 实现强制类型转换 数字类型转为字符串,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-11-11
  • Vuejs第一篇之入门教程详解(单向绑定、双向绑定、列表渲染、响应函数)

    Vuejs第一篇之入门教程详解(单向绑定、双向绑定、列表渲染、响应函数)

    组件(Component)是 Vue.js 最强大的功能之一。接下来给大家介绍vuejs单向绑定、双向绑定、列表渲染、响应函数的相关知识,非常不错,感兴趣的朋友一起看看吧
    2016-09-09
  • Vue+Antv F2实现层叠柱状图

    Vue+Antv F2实现层叠柱状图

    这篇文章主要为大家详细介绍了Vue+Antv F2实现层叠柱状图,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-04-04

最新评论