vue如何解决provide和inject响应
创始人
2024-11-19 06:41:42
0次

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

provide:

Object | () => Object(一个对象或返回一个对象的函数)

inject:

Array | { [key: string]: string | Symbol | Object }(一个字符串数组,或一个对象,对象的 key 是本地的绑定名)

要实现父子组件响应,父组件传递的数据类型必须是对象Object,子组件接收的数据类型必须是对象Object,其他数据类型都是不好使的

provide和inject响应的例子:

父组件:

子组件(MyList.vue)

输出:

初始化:

vue如何解决provide和inject响应

修改父组件数据:输入框的值是"初始",子组件也输出"初始

vue如何解决provide和inject响应

修改子组件数据:输入框的值是"子组件",父组件输入框也显示"子组件"

vue如何解决provide和inject响应

好啦,provide和inject实现响应,父组件的数据修改影响了子组件的更新,子组件的数据修改同样影响了父组件的更新。

数据格式为对象Object的类型,父组件修改数据影响子组件,子组件修改数据影响父组件,感觉和对象的存储有关,对象格式数据存储的是指针而不是数据,所以父子组件其实是用的同一个对象,修改的也是同一个对象,因此会实现双向响应改变,不知道我这样理解的是由有问题。

补充知识: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

 
    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} 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 | () => Object

    inject:Array | { [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"
     }
     // ...
     }

    相关内容

    热门资讯

    空调连续工作多久需要停机休息 空调连续工作的时间取决于多个因素,包括空调的型号、功率、使用环境和维护情况等。一般来说,空调可以连续...
    空调哪个符号是除湿的 空调除湿功能通常用一个水滴形状的符号表示。不同品牌和型号的空调遥控器可能会有所差异,但一般来说,除湿...
    格力空调多长时间加一次氟利昂 1、一般情况下,空调对氟利昂的使用量是非常小的,所以在空调使用了四年左右的时候再考虑加也没问题。2、...
    空调用多长时间需要加氟一次 一般情况下是五年。当出现以下这几种情况时,空调才需要加氟。1、空调的室内机和室外机各有两个接口,当接...
    格调生活·C标思享荟:卡萨帝在... 9月12日的郑州龙湖金融岛,夜风轻拂,灯光璀璨。“C标时刻共传奇——卡萨帝思享荟暨20周年品牌盛典郑...
    品牌价值破千亿、高端份额持续领... 9月12日,“C标时刻共传奇——卡萨帝思享荟暨20周年品牌盛典郑州站”在郑州龙湖金融岛举办。2026...
    空调主板坏了修800还是换新的 空调主板坏了是修还是换新,需要考虑多个因素,以下是一些建议:1. 维修成本:如果维修费用较低,比如 ...
    空调开多久需要休息多长时间 问题:空调开多久需要休息多长时间回答:1、在使用空调的过程中,一般空调开7~8个小时左右需要休息2~...
    中央空调多长时间清洗一次 1、一般空调开机前清洗一次即可,空调开机中间时段再清洗一次,空调关机时清洗一次,这样比较合理。2、空...
    中央空调氟利昂多久加一次 看空调制热和制冷程度,很多人的观点认为氟利昂必须一年放一次,其实这个观点是错误的,理解上面有点偏差,...