详解Vue 多级组件透传新方法provide/inject
作者：敖天羽 发布时间：2024-06-05 09:21:03
标签：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
来源：https://codesky.me/archives/vue-provide-inject.wind
0
投稿猜你喜欢
- Django的权限系统很简单，它可以赋予users或groups中的users以权限。Django admin后台就使用了该权限系统，不过也
1. 原理图2. 说明JS 中用来存储待执行回调函数的队列包含 2 个不同特定的列队宏列队：用来保存待执行的宏任务（回调），比如：定时器回调- 机器A: select instance_name from v$instance; select name from v$database
- 真正意义上来说Javascript并不是一门面向对象的语言，没有提供传统的继承方式，但是它提供了一种原型继承的方式，利用自身提供的原型属性来
- 本文实例为大家分享了Python实现五子棋游戏的具体代码，供大家参考，具体内容如下了解游戏的规则是我们首先需要做的事情，如果不知晓规则，那么
- 选择排序：选择排序（Selection sort）是一种简单直观的 排序算法 。它的工作原理如下。首先在未排序序列中找到最小（大）元素，存放
- 1. 引言在Python开发中，itertools库经常被忽视，实际上该库中抱恨了一些非常棒的函数，特别是用于处于数据流的函数。在本文中，我
- 前言：反向传播的目的是计算成本函数C对网络中任意w或b的偏导数。一旦我们有了这些偏导数，我们将通过一些常数 α的乘积和该
- Python是一种高级编程语言，它在众多编程语言中，拥有极高的人气和使用率。Python中的多线程和线程池是其强大的功能之一，可以让我们更加
- 1. 引言之前已经有博客专门介绍了Python中的列表生成式，可能大家还不太擅长。这里推荐九个Python列表生成式的面试题（从简单到困难排
- 本文实例讲述了Python三元运算实现方法。分享给大家供大家参考。具体分析如下：Python中没有像C++和Java等语言中的三元运算符，但
- 数据库是数据的集合，与数学的集合论有密不可分的关系。为提高查询速度，我们可以：对数据表添加索引，以加快搜索速度;通过编程技巧最大限度地利用索
- 如何让我的网页自动适应客户端的屏幕分辨率？然后用下列办法进行自动推送：<％ @language="vbscript
- 一、共享变量共享变量：当多个线程访问同一个变量的时候。会产生共享变量的问题。例子：import threadingsum = 0loopSu
- 数据库系统的安全性包括很多方面。由于很多情况下，数据库服务器容许客户机从网络上连接，因此客户机连接的安全对MySQL数据库安全有很重要的影响
- 前言大家应该都有所体会，为了提高验证码的识别准确率，我们当然要首先得到足够多的测试数据。验证码下载下来容易，但是需要人脑手工识别着实让人受不
- 程序员周末都喜欢做什么？在公司加班？在家里加班？看电影？睡觉？程序员都怎么找女朋友？百分之八十的程序员表示，女朋友是啥，有好 * 就够了。程序
- // 和PHP一样的时间戳格式化函数// @param {string} format 格式
- 如何实现刷新当前页面呢？借助js你将无所不能。1，reload 方法，该方法强迫浏览器刷新当前页面。语法：location.reload([
- PyQt之打开保存对话框(QFileDialog)的方法和使用一、控件说明QFileDialog是用于打开和保存文件的标准对话框，继承自QD
