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

目录
  • provide inject的响应式监听解决
  • vue监听赋值及provide与inject

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"
    }
    // ...
  }

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue 解决provide和inject响应的问题

    官网上说provide 和 inject 绑定并不是可响应的.这是刻意为之的.然而,如果你传入了一个可监听的对象,那么其对象的属性还是可响应的. provide: Object | () => Object(一个对象或返回一个对象的函数) inject: Array | { [key: string]: string | Symbol | Object }(一个字符串数组,或一个对象,对象的 key 是本地的绑定名) 要实现父子组件响应,父组件传递的数据类型必须是对象Object,子组件接收的数

  • 聊聊Vue中provide/inject的应用详解

    众所周知,在组件式开发中,最大的痛点就在于组件之间的通信.在 Vue 中,Vue 提供了各种各样的组件通信方式,从基础的 props/$emit 到用于兄弟组件通信的 EventBus,再到用于全局数据管理的 Vuex. 在这么多的组件通信方式中,provide/inject 显得十分阿卡林(毫无存在感).但是,其实 provide/inject 也有它们的用武之地.今天,我们就来聊聊 Vue 中 provide/inject 的应用. 何为 provide/inject provide/inj

  • 浅析vue中的provide / inject 有什么用处

    1.前言 vue的父子组件通信用什么? :prop和$emit的组合. 如果是爷孙组件呢? :那么就要用父组件来转发数据和事件了. 如果是太爷爷和孙子组件呢? :当然是vuex啦 emmm 好的,没我啥事了,我这就走. 不行,我还能再挣扎一会儿!肯定有一部分兄弟做的项目比较小,组件通信的情况不是很多,懒得引入vuex,那么provide/inject就是爷孙(不限于爷孙/父子,中间隔了多少级都可以)通信问题的最好解决方案啦! 2.官方文档抄过来的介绍 这对选项需要一起使用,以允许一个祖先组件向其

  • vue2实现provide inject传递响应式

    1. vue2 中的常规写法 // 父级组件提供 'foo' var Provider = { data(){ return { foo: 'bar' } } provide: { fooProvide: this.fooFn // 传递一个引用类型函数过去 }, methods:{ fooFn() { return this.foo } } } var Child = { inject: ['fooProvide'], computed:{ fooComputed(){ return this

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

    目录 provide inject的响应式监听解决 vue监听赋值及provide与inject provide inject的响应式监听解决 提示:provide 和 inject 绑定并不是可响应的.这是刻意为之的.然而,如果你传入了一个可监听的对象,那么其对象的属性还是可响应的. 所以传值传对象即可 provide(){     return {       provObj: {         uuidList:{}       }     }   }, this._provided.p

  • Vue.js中provide/inject实现响应式数据更新的方法示例

    vue.js官方文档:https://cn.vuejs.org/v2/api/#provide-inject 首先假设我们在祖辈时候传入进来是个动态的数据,官方不是说如果你传入了一个可监听的对象,那么其对象还是可响应的么? parent父页面: export default { provide() { return { foo: this.fonnB } }, data(){ return { fonnB: 'old word '} } created() { setTimeout(()=>{

  • 如何在Vue中使localStorage具有响应式(思想实验)

    响应式是Vue.js的最大特色之一.如果你不知道幕后情况,它也是最神秘的地方之一.例如,为什么它不能用于对象和数组,而不能用于诸如 localStorage 之类的其他东西? 让我们回答这个问题,在解决这个问题时,让Vue响应式与 localStorage 一起使用. 如果运行以下代码,则会看到计数器显示为静态值,并且不会像我们期望的那样发生变化,这是因为setInterval在 localStorage 中更改了该值. new Vue({ el: "#counter", data:

  • Vue中computed(计算属性)和watch(监听属性)的用法及区别说明

    Vue中computed(计算属性)和watch(监听属性)的用法及区别说明

    目录 计算属性computed 侦听属性watch 计算属性computed 支持缓存,只有依赖数据发生改变,才会重新进行计算 不支持异步,当computed内有异步操作时无效,无法监听数据的变化 computed 属性值会默认走缓存,计算属性是基于它们的响应式依赖进行缓存的,也就是基于data中声明过或者父组件传递的props中的数据通过计算得到的值 如果一个属性是由其他属性计算而来的,这个属性依赖其他属性,是一个多对一或者一对一,一般用computed 如果computed属性属性值是函数,

  • 在vue中对数组值变化的监听与重新响应渲染操作

    在我们项目开发过程中,实例中的数据类型可以是对象.数组等.在对象中,某个属性值发生更改时,我们可以通过对象的深度监听,以达到重新渲染页面的需求.或者查阅这篇文章 例如: <script> export default { data(){ return { objVal: { name: 'obj', type: 'obj' } } }, watch:{ objVal:{ handler(val,oldval){ }, deep: true, } }, methods:{ changeObj()

  • vue中的事件触发(emit)及监听(on)问题

    目录 vue事件触发(emit)及监听(on) 每个 vue 实例都实现了事件接口 案例 vue emit事件无法触发问题 vue事件触发(emit)及监听(on) 每个 vue 实例都实现了事件接口 1.使用 $on(eventName,callback) 监听事件 2.使用 $emit(eventName,[…args]) 触发事件 $emit 和 $on 必须都在实例上进行触发和监听. // on监听emit触发的事件 created:function(){     this.$on('e

  • 解决vue单页面多个组件嵌套监听浏览器窗口变化问题

    需求 最近公司有个大屏展示项目(如下图) 页面的元素需要做响应式监听,图表需要跟着窗口响应变化 问题 每一个图表都被我写成了一个组件,然后就在每一个组件里写了一串代码,监听浏览器变化 结果只有父组件的代码生效 mounted(){ window.onresize = () => { //当窗口发生改变时触发 // }; } 原因 经简单测试后发现,同一个路由页面只能注册一次浏览器窗口监听事件,第二次注册的会覆盖第一次注册 下边代码即可测试 mounted(){ window.onresize =

  • Vue 中 provide和inject的使用

    Vue 中 provide和inject的使用

    目录 前言 Vue中如何使用provide和inject 在 Vue 中使用注入访问父数据 前言 在Vue中我们可以很方便的通过父组件往子组件传递属性,Props是我们将数据传递到子组件的主要方式之一.例如,下面的代码,我们往子组件(PopularList )传递了属性 name,其值是Most Popular Posts.在PopularList中我们可以通过name访问数据. <PopularList name="Most Popular Posts" /> 但是有时子

随机推荐