vue父向子传值,子组件无法及时更新父组件传过来的值的问题

 由于页面内的表格是根据elementUI二次封装的组件,表格的请求地址需要在父组件页面判断修改并传给子组件,结果发现需要点击两次,子组件的请求地址才会改变。

原写法:

 1 search: {
 2       deep: true,
 3       handler(params) {
 4         this.url =
 5           this.type == 1
 6             ? "url1"
 7             : "url2";
 8             this.main.load(params);
 9         });
10       }
11     }

子组件拿到的url未更新,load方法还是请求之前的url地址。

修改后的写法:

search: {
      deep: true,
      handler(params) {
        this.url =
          this.type == 1
            ? "url1"
            : "url2";
        this.$nextTick(() => {
            this.main.load(params);
        });
      }
    }

这样子组件就能及时拿到更新后的url了。

原文地址:https://www.cnblogs.com/front-king/p/12851440.html