解决vue中provide inject的响应式监听

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

Posted in Vue.js onApril 19, 2022

provide inject的响应式监听解决

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

所以传值传对象即可

provide(){
    return {
      provObj: {
        uuidList:{}
      }
    }
  },
  • this._provided.provObj.uuidList = res(异步得到的数据)
  • inject那边正常获取

vue监听赋值及provide与inject

vue 当父组件 改变 子组件的props 却不变

  watch: {
    'oState': function (val,oldval) {
      this.getOrderList({orderStatus: this.getOrderState(this.oState), pageSize: 1})
    },
  // 深度 watcher
      c: {
        handler: function (val, oldVal) { /* ... */ },
        deep: true
      },
  },
  • $refs
  <ul class="comment-list" v-if="list" ref="commentList"></ul>
  scrollToTop () {
    this.$refs.commentList.scrollTop = 0
  }
  • $el
  this.$refs.studentListDialog.$el.querySelector('.el-dialog')
  vm.$once( event, callback )

参数:

{string} event

{Function} callback

用法:

监听一个自定义事件,但是只触发一次,在第一次触发之后移除监听器。

vm.$off( [event, callback] )

参数:

  • {string | Array<string>} event (只在 2.2.2+ 支持数组)
  • {Function} [callback]

用法:

  • 移除自定义事件监听器。
  • 如果没有提供参数,则移除所有的事件监听器;
  • 如果只提供了事件,则移除该事件所有的监听器;
  • 如果同时提供了事件与回调,则只移除这个回调的监听器。
vm.$destroy()

用法:

完全销毁一个实例。清理它与其它实例的连接,解绑它的全部指令及事件监听器。

触发 beforeDestroy 和 destroyed 的钩子。

当生成vue实例后,当再次给数据赋值时,有时候并不会自动更新到视图上去

  obj:{
      arr:[]
  }

双向绑定后无法直接改变obj.arr

需要新增一个arr赋值或者

  this.$set(this.ruleForm, 'date', time)
  vue.set(target,key,value)

参数:

{object | Array} target

{string | number} key

{any} value

this.$set()和Vue.set()本质方法一样,前者可以用在methods中使用。

set方法调用时,可以触发页面全部重新渲染。

provide:Object | () => Objectinject:Array<string> | { [key: string]: string | Symbol | Object }

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

provide 选项应该是一个对象或返回一个对象的函数。该对象包含可注入其子孙的属性。在该对象中你可以使用 ES2015 Symbols 作为 key,但是只在原生支持 Symbol 和 Reflect.ownKeys 的环境下可工作。

inject 选项应该是:

一个字符串数组,或一个对象,对象的 key 是本地的绑定名,value 是:

在可用的注入内容中搜索用的 key (字符串或 Symbol),或一个对象,该对象的:

  • from 属性是在可用的注入内容中搜索用的 key (字符串或 Symbol)
  • default 属性是降级情况下使用的 value

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

示例:

// 父级组件提供 ‘foo'
  var Provider = {
    provide: {
      foo: 'bar'
    },
    // ...
  }
// 子组件注入 'foo'
  var Child = {
    inject: ['foo'],
    created () {
      console.log(this.foo) // => "bar"
    }
    // ...
  }
Vue.js 相关文章推荐
基于vue项目设置resolves.alias: '@'路径并适配webstorm
Dec 02 Vue.js
如何正确解决VuePress本地访问出现资源报错404的问题
Dec 03 Vue.js
vue+element实现动态加载表单
Dec 13 Vue.js
vue从后台渲染文章列表以及根据id跳转文章详情详解
Dec 14 Vue.js
解决vue使用vant轮播组件swipe + flex时文字抖动问题
Jan 07 Vue.js
如何在vue 中使用柱状图 并自修改配置
Jan 21 Vue.js
Vue常用API、高级API的相关总结
Feb 02 Vue.js
vue如何使用rem适配
Feb 06 Vue.js
WebStorm无法正确识别Vue3组合式API的解决方案
Feb 18 Vue.js
vue-cli 3如何使用vue-bootstrap-datetimepicker日期插件
Feb 20 Vue.js
如何理解Vue简单状态管理之store模式
May 15 Vue.js
Vue + iView实现Excel上传功能的完整代码
Jun 22 Vue.js
vue3种table表格选项个数的控制方法
Apr 14 #Vue.js
vue项目配置sass及引入外部scss文件
Apr 14 #Vue.js
解决vue-router的beforeRouteUpdate不能触发
Apr 14 #Vue.js
vue3语法糖内的defineProps及defineEmits
Apr 14 #Vue.js
vue使用localStorage持久性存储实现评论列表
Apr 14 #Vue.js
vue项目proxyTable配置和部署服务器
Apr 14 #Vue.js
vue组件冲突之引用另一个组件出现组件不显示的问题
Apr 13 #Vue.js
You might like
第四节--构造函数和析构函数
2006/11/16 PHP
PHPWind 发帖回帖Api PHP版打包下载
2010/02/08 PHP
PHP安全防范技巧分享
2011/11/03 PHP
解析如何屏蔽php中的phpinfo()函数
2013/06/06 PHP
在win系统安装配置 Memcached for PHP 5.3 图文教程
2015/03/03 PHP
PHP实现多文件上传的方法
2015/07/08 PHP
为Yahoo! UI Extensions Grid增加内置的可编辑器
2007/03/10 Javascript
javascript静态的url如何传递
2007/05/03 Javascript
Use Word to Search for Files
2007/06/15 Javascript
from 表单提交返回值用post或者是get方法实现
2013/08/21 Javascript
千分位数字格式化(用逗号隔开 代码已做了修改 支持0-9位逗号隔开)的JS代码
2013/12/05 Javascript
js通过location.search来获取页面传来的参数
2014/09/11 Javascript
通过网页查看JS源码中汉字显示乱码的解决方法
2016/10/26 Javascript
JavaScript实现瀑布流图片效果
2017/06/30 Javascript
解决vue.js在编写过程中出现空格不规范报错的问题
2017/09/20 Javascript
Vue+ElementUI实现表单动态渲染、可视化配置的方法
2018/03/07 Javascript
深入理解Vue Computed计算属性原理
2018/05/29 Javascript
一个简单的node.js界面实现方法
2018/06/01 Javascript
微信小程序中的video视频实现 自定义播放按钮、封面图、视频封面上文案
2020/01/02 Javascript
javascript利用canvas实现鼠标拖拽功能
2020/07/23 Javascript
[58:15]2018DOTA2亚洲邀请赛 4.1 小组赛 A组 NB vs Liquid
2018/04/02 DOTA
从零学python系列之数据处理编程实例(一)
2014/05/22 Python
python查找目录下指定扩展名的文件实例
2015/04/01 Python
python随机在一张图像上截取任意大小图片的方法
2019/01/24 Python
python flask安装和命令详解
2019/04/02 Python
实例详解Matlab 与 Python 的区别
2019/04/26 Python
python通过TimedRotatingFileHandler按时间切割日志
2019/07/17 Python
Python如何使用Gitlab API实现批量的合并分支
2019/11/27 Python
浅谈spring boot 集成 log4j 解决与logback冲突的问题
2020/02/20 Python
Python如何使用turtle库绘制图形
2020/02/26 Python
html5调用摄像头功能的实现代码
2018/05/07 HTML / CSS
French Connection官网:女装、男装及家居用品
2019/03/18 全球购物
大学毕业生的自我鉴定
2013/11/30 职场文书
电子技术专业中专生的自我评价
2013/12/17 职场文书
饲料采购员岗位职责
2013/12/19 职场文书
办理生育手续介绍信
2014/01/14 职场文书