解决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 在服务器端直接修改请求的接口地址
Dec 19 Vue.js
vue绑定class的三种方法
Dec 24 Vue.js
vue+vant 上传图片需要注意的地方
Jan 03 Vue.js
手写Vue源码之数据劫持示例详解
Jan 04 Vue.js
vue实现按钮切换图片
Jan 20 Vue.js
使用Vue.js和MJML创建响应式电子邮件
Mar 23 Vue.js
springboot+VUE实现登录注册
May 27 Vue.js
vite+vue3.0+ts+element-plus快速搭建项目的实现
Jun 24 Vue.js
vue整合百度地图显示指定地点信息
Apr 06 Vue.js
vue3引入highlight.js进行代码高亮的方法实例
Apr 08 Vue.js
vue实现input输入模糊查询的三种方式
Aug 14 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/10/09 PHP
服务器变量 $_SERVER 的深入解析
2013/07/02 PHP
php表单请求获得数据求和示例
2014/05/15 PHP
php控制文件下载速度的方法
2015/03/24 PHP
迪菲-赫尔曼密钥交换(Diffie?Hellman)算法原理和PHP实现版
2015/05/12 PHP
Zend Framework动作助手Redirector用法实例详解
2016/03/05 PHP
thinkphp 手机号和用户名同时登录
2017/01/20 PHP
php实现文件与16进制相互转换的方法示例
2017/02/16 PHP
解决tp5在nginx下修改配置访问的问题
2019/10/16 PHP
JavaScript Undefined,Null类型和NaN值区别
2008/10/22 Javascript
JQuery 学习笔记 选择器之一
2009/07/23 Javascript
在jQuery中 常用的选择器介绍
2013/04/16 Javascript
使用AngularJS对路由进行安全性处理的方法
2015/06/18 Javascript
前端跨域的几种解决方式总结(推荐)
2017/08/16 Javascript
jQuery读取本地的json文件(实例讲解)
2017/10/31 jQuery
纯js代码生成可搜索选择下拉列表的实例
2018/01/11 Javascript
JavaScript undefined及null区别实例解析
2020/07/21 Javascript
[48:18]DOTA2-DPC中国联赛 正赛 RNG vs Dynasty BO3 第二场 1月29日
2021/03/11 DOTA
跟老齐学Python之for循环语句
2014/10/02 Python
Python对象体系深入分析
2014/10/28 Python
python实现通过代理服务器访问远程url的方法
2015/04/29 Python
在Python中执行系统命令的方法示例详解
2017/09/14 Python
Python 使用 environs 库定义环境变量的方法
2020/02/25 Python
Python使用文件操作实现一个XX信息管理系统的示例
2020/07/02 Python
python爬虫中url管理器去重操作实例
2020/11/30 Python
CSS3动画之利用requestAnimationFrame触发重新播放功能
2019/09/11 HTML / CSS
GLAMGLOW香港官网:明星出镜前的秘密武器
2017/03/16 全球购物
特步官方商城:Xtep
2017/03/21 全球购物
团支书的期末学习总结自我评价
2013/11/01 职场文书
皮肤科医师岗位职责
2013/12/04 职场文书
《大禹治水》教学反思
2014/04/27 职场文书
环保建议书200字
2014/05/14 职场文书
公司贷款承诺书
2014/05/30 职场文书
2014乡镇党委副书记对照检查材料思想汇报
2014/10/09 职场文书
大学生如何逃脱“毕业季创业队即散伙”魔咒?
2019/08/19 职场文书
SpringBoot+Vue+JWT的前后端分离登录认证详细步骤
2021/09/25 Java/Android