provide/inject异步传值问题

provide/inject

大家好！我是野老，今天给大家分享vue中跨组件传值的provide/inject组合。

之前项目中基本没有用过这个组合，近期项目中遇到了需要跨组件传值，当时第一时间就想到这个组合，但实际运用中踩到了很多坑。

官网中有提到provide中注入的数据是非响应式的，但是在实际开发过程中，我们需要传递的数据是响应式，且异步的获取数据，那么这个在传递就存在很多问题。

问题描述

如果按照常规方法传递一个异步获取的数据进行传递，在子孙组件中只能得到一个空对象。

在爷爷组件中注入异步数据。

export default {

  // 爷爷组件

  name: 'app',

  components: {

    Parent

  },

  data() {

    return {

      list:{}

    }

  },

  provide(){

    return {

      list:this.list

    }

  },

  created(){

    this.getdata()

  },

  methods:{

    getdata(){

      // mock异步数据

      Promise.resolve(

        {name:'野老',age:20}

       ).then(data => {

         this.list = data

      })

    }

  }

}

在孙子组件中注入。

 export default {

   // 孙子组件

   inject:['list'],

    created(){

     console.log(this.list)    

   },

   methods:{

    change(){

      this._list.age++

      }

  }

 }

    结果输出。

采用工厂函数实现响应式

 这里我们需要改变2处数组，第一我们需要将provide注入的数据改变为一个响应式数据。第二步，通过计算属性来获取最新的数据。

爷爷组件中改变，使用一个工厂函数回调方式。

  provide(){

    return {

      list:() => this.list

    }

  },

   子孙组件中

computed:{

   getlist(){

    // 爷爷组件中的list方法

     return this.list()

 }

},

也能通过方法去改变数据。

采用$set实现响应式

this.$set(this.list,'obj',data)

需要注意的是，在传递下去的过程中就多嵌套了一层。

以上就是本期分享。