美文网首页
provide/inject 详解

provide/inject 详解

作者: 简单tao的简单 | 来源:发表于2024-02-25 15:41 被阅读0次

基本使用方式:

const s = Symbol()

export default {
  provide: {
    foo: 'foo',
    [s]: 'bar'
  }
}

使用函数可以提供其组件中的状态:

export default {
  data() {
    return {
      msg: 'foo'
    }
  }
  provide() {
    return {
      msg: this.msg
    }
  }
}

上面这个例子,供给的 msg 不是响应式的

Vue祖孙组件通过provide/inject异步传值,孙组件拿不到数据如何解决?


原因和解决方法

  • 因为在父组件异步获取数据前,tableData的空值就已传给了孙组件(详情查看父子组件生命周期执行顺序,其次异步调用在最后执行)
  • 在异步调用结束后,又因为provide 和 inject 绑定并不是可响应的。这是刻意为之的。然而,如果你传入了一个可监听的对象,那么其对象的属性还是可响应的。

说人话就是如果你把对象都改了那这个改动就追踪不到了,如果你就改了个对象属性那这种响应就能追踪到。以下是具体的代码分析。

解决思路: 将实际想获取的数组包裹在对象中作为对象的属性传递,也就是tableData.list,将整个tableData传过去,tableData.list的改变可以被响应。

// parent.vue
data () {
    tableData: {
        list: []
    }
},
provide () {
    return {
        tableData: this.tableData
    }
},
methods:{
    getTableData(){
      axios.get("url")
        .then((res) => {
          this.tableData.list = res.data.tableData;
          console.log("我是爷组件:", this.tableData.list);
        });
    },
  }

// child.vue
...
inject: ['taleData']
...
<el-table :data="tableData.list">

相关文章

  • vue新特性provide/inject深入学习

    provide/inject深入学习 本文深入探究provide,inject 在官网porivide, inje...

  • vue 解决provide和inject响应

    vue 解决provide和inject响应 官网上说provide 和 inject 绑定并不是可响应的。这是刻...

  • provide/inject

    作用 成对出现,在组件中可以获取祖先组件的方法/属性,不管该组件嵌套有多深。 一般来说,我们可以通过$parent...

  • provide/inject

  • provide / inject

    类型: provide:Object | () => Objectinject:Array | { [key: ...

  • provide/inject

    使用provide传递当前组件实例 在后代组件中接收组件

  • provide / inject

    provide / inject这对选项需要一起使用,以允许一个祖先组件向其所有子孙后代注入一个依赖,不论组件层次...

  • provide/inject

    provide/inject能够用于实现祖先和后代之间的传值parent 父组件 child 组件 grand 孙...

  • vue学习- provide / inject

    https://cn.vuejs.org/v2/api/#provide-inject 1、解释 provide ...

  • vue刷新当前页面

    provide 与 inject结合使用 在父组件中定义 provide App.vue