zoukankan      html  css  js  c++  java
  • vue中使provide中的数据变为响应式

    正常使用provide的方式:

    父组件中:

    provide:{

      for:'demo'

    }

    这样子组件中无论多深的子组件都可以使用:
    inject:['for'],

    data(){

      return{

        demo:this.for

      }

    }

    但是上面的写法有一定的问题,比如父组件中for变量的值如果我们是在mounted方法中请求后台数据再更改provide中for的值,那么在子组件中获取不到更改后的for的值。

    这时候就需要换一种写法:

    父组件中:

      provide() {
        return {
          provObj: {
            for: '',
          },
        };
      },
     mounted() {
      
     setTimeout(()=>{
          this._provided.provObj.for= 'demo';
        },2000);
    }
    子组件中:

    inject:['provObj'],

    data(){

      return{

        demo:this.provObj.for

      }

    }

    这样就可以获取到在mounted中才给provide赋上的值。

  • 相关阅读:
    [Postman]历史(8)
    [Postman]响应(7)
    [Postman]请求(6)
    [Postman]查找替换(5)
    ORA-02050故障诊断一例
    转 js实践篇:例外处理Try{}catch(e){}
    转 PHP
    HTML DOM getElementById() 方法
    地点选择
    9i 和 11 g 区别
  • 原文地址:https://www.cnblogs.com/maycpou/p/14858168.html
Copyright © 2011-2022 走看看