vue中使用provide-inject传值注意的问题

最新推荐文章于 2023-08-21 17:44:23 发布

小智玩前端

最新推荐文章于 2023-08-21 17:44:23 发布

阅读量472

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/m0_50441807/article/details/129251403

版权

在Vue.js中，使用provide/inject进行父子组件通信时，原始值传递非响应式。要实现响应式，可以将值包装在函数内或放在对象中传递，因为函数和对象是引用类型，更新时会传递引用，从而保证子组件数据同步。

摘要由CSDN通过智能技术生成

父组件使用provide传值：

  data() {
    return {
      number: 111
    }
  },
  provide() {
    return {
      number: this.number
    }
  }

子组件使用inject接收值：

  inject: ['number']

以上的方式，当父组件的number值发生改变后，子组件中接收的number并不会发生变化，也就是不是响应式的；
想要变成响应式：
number用函数方式导出：

  provide() {
    return {
      number: () => this.number
    }
  }

或者把number放在对象里面，然后使用provide传一个对象过去：

  data() {
    return {
      obj:{
        number: 111
      }
    }
  },
  provide() {
    return {
      obj: this.obj
    }
  }

以上的方式之所以是响应式，是因为对象和函数都属于引用数据类型，实际上传的是引用地址过去，所以当引用数据类型中的数据发生了改变，子组件接收的数据也会发生改变；

关注