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 密码强弱度检测万能插件
Feb 25 Javascript
JS getStyle获取最终样式函数代码
Apr 01 Javascript
ToolTips JQEURY插件之简洁小提示框效果
Nov 19 Javascript
JavaScript简单下拉菜单实例代码
Sep 07 Javascript
jquery拖动层效果插件用法实例分析(附demo源码)
Apr 28 Javascript
Angularjs 制作购物车功能实例代码
Sep 14 Javascript
Vue Spa切换页面时更改标题的实例代码
Jul 15 Javascript
echarts饼图扇区添加点击事件的实例
Oct 16 Javascript
详解JavaScript中typeof与instanceof用法
Oct 24 Javascript
JS/HTML5游戏常用算法之碰撞检测 地图格子算法实例详解
Dec 12 Javascript
微信小程序实现用table显示数据库反馈的多条数据功能示例
May 07 Javascript
vue-cli3中vue.config.js配置教程详解
May 29 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实现验证码功能
2006/10/09 PHP
thinkphp区间查询、统计查询与SQL直接查询实例分析
2014/11/24 PHP
PHP实现打包下载文件的方法示例
2017/10/07 PHP
解决PHP curl或file_get_contents下载图片损坏或无法打开的问题
2019/10/11 PHP
JavaScript 中的replace方法说明
2007/04/13 Javascript
JS实现的简洁二级导航菜单雏形效果
2015/10/13 Javascript
jQuery ajax请求返回list数据动态生成input标签,并把list数据赋值到input标签
2016/03/29 Javascript
AngularJS入门教程之多视图切换用法示例
2016/11/02 Javascript
微信小程序动态显示项目倒计时效果
2017/06/13 Javascript
详解基于vue的移动web app页面缓存解决方案
2017/08/03 Javascript
关于vue-router的那些事儿
2018/05/23 Javascript
Vue表单及表单绑定方法
2018/09/04 Javascript
详解如何给React-Router添加路由页面切换时的过渡动画
2019/04/25 Javascript
webpack实践之DLLPlugin 和 DLLReferencePlugin的使用教程
2019/06/10 Javascript
Python中二维列表如何获取子区域元素的组成
2017/01/19 Python
python 换位密码算法的实例详解
2017/07/19 Python
Python学习之用pygal画世界地图实例
2017/12/07 Python
Python 十六进制整数与ASCii编码字符串相互转换方法
2018/07/09 Python
Python按钮的响应事件详解
2019/03/04 Python
详解python使用turtle库来画一朵花
2019/03/21 Python
Python发展简史 Python来历
2019/05/14 Python
Python如何操作office实现自动化及win32com.client的运用
2020/04/01 Python
python 实现图片裁剪小工具
2021/02/02 Python
python实现图片转字符画
2021/02/19 Python
英国高街奥特莱斯:Highstreet Outlet
2019/11/21 全球购物
工程地质勘察专业大学生求职信
2013/10/13 职场文书
高中毕业的自我鉴定
2013/12/09 职场文书
产品包装策划方案
2014/05/18 职场文书
汽车服务工程专业自荐信
2014/09/02 职场文书
租车协议书范本2014
2014/11/17 职场文书
委托书格式范文
2015/01/28 职场文书
2015年仓库工作总结
2015/04/09 职场文书
2015迎新晚会开场白
2015/07/17 职场文书
2016元旦晚会主持词开场白和结束语
2015/12/04 职场文书
导游词范文之颐和园/重庆/云台山
2019/09/10 职场文书
pytorch中[..., 0]的用法说明
2021/05/20 Python