解决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 相关文章推荐
vue3.0+vue-router+element-plus初实践
Dec 02 Vue.js
vue-calendar-component 封装多日期选择组件的实例代码
Dec 04 Vue.js
vue中配置scss全局变量的步骤
Dec 28 Vue.js
vue+element UI实现树形表格
Dec 29 Vue.js
梳理一下vue中的生命周期
Dec 30 Vue.js
Vite和Vue CLI的优劣
Jan 30 Vue.js
Vue单页面应用中实现Markdown渲染
Feb 14 Vue.js
vue2实现provide inject传递响应式
May 21 Vue.js
vue+element ui实现锚点定位
Jun 29 Vue.js
vue实现滑动解锁功能
Mar 03 Vue.js
vue实现列表拖拽排序的示例代码
Apr 08 Vue.js
vue中this.$http.post()跨域和请求参数丢失的解决
Apr 08 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
?繁体转换的class
2006/10/09 PHP
PHP模板引擎Smarty内建函数foreach,foreachelse用法分析
2016/04/11 PHP
Laravel构建即时应用的一种实现方法详解
2017/08/31 PHP
Yii2.0框架实现带分页的多条件搜索功能示例
2019/02/20 PHP
真正的JQuery.ajax传递中文参数的解决方法
2011/05/28 Javascript
JS获取select的value和text值的简单实例
2014/02/26 Javascript
jQuery通过ajax请求php遍历json数组到table中的代码(推荐)
2016/06/12 Javascript
解决同一页面中两个iframe互相调用jquery,js函数的方法
2016/12/12 Javascript
如何把vuejs打包出来的文件整合到springboot里
2018/07/26 Javascript
vue-cli3环境变量与分环境打包的方法示例
2019/02/18 Javascript
监控Nodejs的性能实例代码
2019/07/02 NodeJs
在vue中把含有html标签转为html渲染页面的实例
2019/10/28 Javascript
jQuery实现验证用户登录
2019/12/10 jQuery
JS精确判断数据类型代码实例
2019/12/18 Javascript
Vue过渡效果之CSS过渡详解(结合transition,animation,animate.css)
2020/02/05 Javascript
微信小程序纯文本实现@功能
2020/04/08 Javascript
vue表单验证之禁止input输入框输入空格
2020/12/03 Vue.js
vue实现登录、注册、退出、跳转等功能
2020/12/23 Vue.js
[01:00:25]NB vs Secret 2018国际邀请赛小组赛BO1 B组加赛 8.19
2018/08/21 DOTA
python在windows下创建隐藏窗口子进程的方法
2015/06/04 Python
使用Python控制摄像头拍照并发邮件
2019/04/23 Python
python3获取url文件大小示例代码
2019/09/18 Python
Python命名空间namespace及作用域原理解析
2020/06/05 Python
健身场所或家用健身设备:Life Fitness
2017/11/01 全球购物
美国运动鞋和服装网上商店:YCMC
2018/09/15 全球购物
Kate Spade澳大利亚官方网站:美国设计师手袋品牌
2019/09/10 全球购物
瑞典耳机品牌:URBANISTA
2019/12/03 全球购物
大专自我鉴定范文
2013/10/01 职场文书
25岁生日感言
2014/01/13 职场文书
幼儿园父亲节活动方案
2014/03/11 职场文书
党的群众路线教育学习材料
2014/05/12 职场文书
装修活动策划方案
2014/08/27 职场文书
活动总结范文
2014/08/30 职场文书
英语邀请函范文
2015/02/02 职场文书
业务员岗位职责
2015/02/03 职场文书
ubuntu开机后ROS程序自启动问题
2022/12/24 Servers