Vue组件通信入门之Provide和Inject机制


Posted in Javascript onDecember 29, 2019

前言

Vue中父组件到子组件的通信主要由子组件的props属性实现。但是在一些情况下,父组件无法直接向子组件的props传值。比如子组件通过父组件的slot进入父组件,父组件根本不知道子组件是谁,更不用说用子组件的props了。这时应该怎么办呢?Vue在2.2.0版本引入了provide与inject,正好适合处理这一情况。

什么是provide与inject

用文档的话说:

provide/inject需要一起使用,以允许一个祖先组件向其所有子孙后代注入一个依赖,不论组件层次有多深,并在起上下游关系成立的时间里始终生效。如果你熟悉 React,这与 React 的上下文特性很相似。

这就是说从父组件的provide属性传入一个对象,子组件(或者是孙组件,只要是子级组件)可以用inject属性接收父组件的provide属性。比如

// main.vue
<template>
  <c1 message="hello world">
    <c2></c2>
  </c1>
</template>
 
// c1.vue
<template>
 <div id="c1">
  <slot></slot>
 </div>
</template>
 
<script>
export default {
 props: ['message'],
 provide () {
  return {
   message: this.message
  }
 }
}
</script>
 
// c2.vue
<template>
 <div id="c2">
   {{ message }}
 </div>
</template>
 
<script>
export default {
 inject: ['message']
}
</script>

上面的main组件会被渲染为:

<div id="c1">
 <div id= "c2">hello world</div>
</div>

可以看到,c1组件在不清楚子组件是什么的情况下,将它的props中的message传给了c2组件。在这里c1组件就像是一个数据源一样,为子组件提供数据。但是,c1组件提供的数据仅在c1的子孙组件中可见,因此可以算作是有作用域限定的数据源。

父到子孙组件方向的数据流

父到子孙组件方向是provide/inject机制设计时的数据流方向。我们可能会猜想,在父组件中更改provide的值,子组件会响应式的发生改变。但是注意到文档中话。

提示:provide和inject绑定并不是可响应的。这是刻意为之的。然而,如果你传入了一个可监听的对象,那么其对象的属性还是可响应的。

这意味着,如果provide的值不是可监听对象时,在父组件中更改provide的值,子组件不会发生任何变化。比如模板仍然为上面那个例子的模板,message的值是一个props属性,不是可监听对象,如果我们在c1的mounted钩子函数里改变message的值。如:

// c1.vue
<script>
export default {
 //...
 mounted () {
  setTimeout( () => {
   this.message = 'Opps, it would not be rendered'
  }, 1000)
 }
}
</script>

子组件不会响应修改后的值。

但是如果provide的值是一个可监听对象呢?请看一下例子:

<script>
// c1.vue
export default {
 data () {
  return {
   message: 'hello world'
  }
 },
 provide () {
  messageData: this.$data
 },
 mounted () {
  setTimeout(() => {
   this.message = 'I can show in c2.'
  }, 10000)
 }
}
</script>
 
// c2.vue
<template>
 <div id="c2">
  {{ messageData.message }}
 </div>
</template>
 
<script>
export default {
 inject: ['messageData']
}
</script>

此时在c1挂载10s后,子组件将会显示I can show in c2。为什么呢?c2中messageData实际上就是c1实例的this.$data。而this.$data上有message的响应式getter与setter。所以c2的视图会被message的dep收集,因此在c1中更新message,c2的视图也会更新。

纵观整个过程,provide/inject机制是非响应式的,即provide与inject之间没有绑定。具体的值是在子组件初始化过程中决定的。

总结

provide/inject提供了一种新的组件间通信的方法。它允许父组件向子孙组件间进行跨层级的数据分发。但是provide/inject是非响应式的,如果要子孙组件根据父组件的值进行改变,provide/inject机制不是一个好的选择。此时可以使用Vuex来管理状态。

好了,以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
Javascript Function对象扩展之延时执行函数
Jul 06 Javascript
iframe里使用JavaScript控制主页转向的方法
Apr 03 Javascript
自己动手写的jquery分页控件(非常简单实用)
Oct 28 Javascript
JavaScript驾驭网页-CSS与DOM
Mar 24 Javascript
学习AngularJs:Directive指令用法(完整版)
Apr 26 Javascript
jQuery鼠标悬停内容动画切换效果
Apr 27 jQuery
详解探索 vuex 2.0 以及使用 vuejs 2.0 + vuex 2.0 构建记事本应用
Jun 16 Javascript
bootstrap fileinput插件实现预览上传照片功能
Jan 23 Javascript
一个基于react的图片裁剪组件示例
Apr 18 Javascript
bootstrap table合并行数据并居中对齐效果
Oct 17 Javascript
Vue传参一箩筐(页面、组件)
Apr 04 Javascript
在VUE中实现文件下载并判断状态的方法
Nov 08 Javascript
JS中数组实现代码(倒序遍历数组,数组连接字符串)
Dec 29 #Javascript
如何基于JavaScript判断图片是否加载完成
Dec 28 #Javascript
Vue页面刷新记住页面状态的实现
Dec 27 #Javascript
uni-app 组件里面获取元素宽高的实现
Dec 27 #Javascript
Vue中axios拦截器如何单独配置token
Dec 27 #Javascript
JavaScript获取当前url路径过程解析
Dec 27 #Javascript
前端开发之便利店收银系统代码
Dec 27 #Javascript
You might like
php array_merge下进行数组合并的代码
2008/07/22 PHP
一步一步学习PHP(3) php 函数
2010/02/15 PHP
使用新浪微博API的OAuth认证发布微博实例
2015/03/27 PHP
THinkPHP获取客户端IP与IP地址查询的方法
2016/11/14 PHP
PHPCMS手机站伪静态设置详细教程
2017/02/06 PHP
php实现简单加入购物车功能
2017/03/07 PHP
php 函数使用可变数量的参数方法
2017/05/02 PHP
详细解读php的命名空间(一)
2018/02/21 PHP
PHP rmdir()函数的用法总结
2019/07/02 PHP
PHP单元测试配置与使用方法详解
2019/12/27 PHP
JavaScript Event学习补遗 addEventSimple
2010/02/11 Javascript
JS+DIV实现鼠标划过切换层效果的实例代码
2013/11/26 Javascript
JQuery实现动态表格点击按钮表格增加一行
2014/08/24 Javascript
Vue.js报错Failed to resolve filter问题的解决方法
2016/05/25 Javascript
JavaScript程序中实现继承特性的方式总结
2016/06/24 Javascript
JavaScript将DOM事件处理程序封装为event.js 出现的低级错误问题
2016/08/03 Javascript
DWR3 访问WEB元素的两种方法实例详解
2017/01/03 Javascript
javascript html5轻松实现拖动功能
2017/03/01 Javascript
JavaScript中的遍历详解(多种遍历)
2017/04/07 Javascript
解决ztree搜索中多级菜单展示不全问题
2017/07/05 Javascript
浅谈在vue中使用mint-ui swipe遇到的问题
2018/09/27 Javascript
Vue中img的src是动态渲染时不显示的解决
2019/11/14 Javascript
[55:44]OG vs NAVI 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
Python性能优化的20条建议
2014/10/25 Python
简单理解Python中基于生成器的状态机
2015/04/13 Python
Python随手笔记第一篇(2)之初识列表和元组
2016/01/23 Python
python 读写txt文件 json文件的实现方法
2016/10/22 Python
django实现前后台交互实例
2017/08/07 Python
深入理解Python单元测试unittest的使用示例
2017/11/18 Python
python学生管理系统代码实现
2020/04/05 Python
Python 一键制作微信好友图片墙的方法
2019/05/16 Python
电子信息毕业生自荐信
2013/11/16 职场文书
教师批评与自我批评心得体会
2014/10/16 职场文书
寒假社会实践个人总结
2015/03/06 职场文书
培训感想范文
2015/08/07 职场文书
假期读书倡议书3篇
2019/08/19 职场文书