vue reject provide可以传异步数据吗？

Z时代
2024-03-13
分类：IT

vue reject provide异步数据怎么传递

// 父组件
export default {
    data(){
        return{
            res:{}
        }    
    },
    provide() {
      return {
        formItem: this.res
      };
    },
    methods:{
        get().then((res)=>{
            this.res = res
        })
    }
}
// 子组件
export default {
    inject: ["formItem"],
    mounted(){
        console.log(this.formItem) // 这里接不到，请问可以解决吗
    }}

回答：

provide-inject如果传递的是非引用类型的值，是不会响应式变化的，但是如果传递的是个引用类型的值，是会响应式变化的。
你接收不到的原因是，在子组件的mounted执行的时候，父组件中res还未得到值。

回答：

其实这个可以用异步 action 的思路去解决：

// 父组件
export default {
    data() {
        return {
            res: null
        }    
    },
    provide() {
      return {
        getRes: this.getRes
      };
    },
    methods:{
        async getRes() {
            if (!this.res) this.res = await get()
            return this.res
        }
    }
}
// 子组件
export default {
    inject: ["getRes"],
    async mounted() {
        console.log(await this.getRes())
    }}

回答：

Vue2里用provide 去传递一个响应式的对象

父元素

{
provide () {
 return {
   test: this.objData
 };
},
data () {
  objData: { 
     message: 'hello'
  }
},
mounted() {  
 // 随机变换值
     setInterval(() => { this.$set(this.objData.message = Math.random())} , 3000) }}