如何在承诺解析并将道具传递给嵌套子项时更新 Vue 组件

Question

我有父组件和子组件。父母的数据在 ajax 调用后填充，我想将其作为道具传递给孩子。我尝试了不同的解决方案，我会发布两个，但还没有工作：你能指出错误吗？该组件确实对更改做出反应。我还需要确保道具正确传递给孩子及其嵌套的孩子。尝试：如果我不使用'v-if'指令，我将得到一个错误，因为:query它作为 null 传递。所以我使用v-if（见下面的版本）并更新渲染，但它没有反应并保持为空（即使数据已正确更新）。我还尝试在不使用 v-if 指令的情况下将查询数据初始化为计算结果，因为毕竟我只需要缓存前提的结果。我还尝试在总线上发出事件，但组件没有反应。最后，我尝试通过使用 :key（例如:key="ready"）使组件具有反应性，它应该在更改时使组件具有反应性:key。但是还是没有效果。模板：<template>  <div v-if="isLoaded()">      <input>      <metroline></metroline>      <grid :query="query"></grid>  </div></template>脚本：export default {data() {  return {    ready : false,    query : null  }},components : {  metroline : Metroline,  grid : Grid},methods: {    isLoaded() {      return this.ready    },    firstQuery( uid, limit, offset) {      var url = // my url            // using Jquery to handle cross origin issues, solving with jsonp callback...            return $.ajax({        url : url,        dataType: 'jsonp',        jsonpCallback: 'callback',        crossDomain: true                 })    }},created() {  var vm = self;  this.firstQuery(...)      .then(function(data){                 this.query = data;                 console.log('firstQuery', this.query);                 // attempts to pass through the query                 // bus.$emit('add-query', this.query);                 this.ready = true;                 self.isLoaded(); // using a self variable, temporarily, jquery deferred messed up with this; however the this.query of vue instance is properly updated                             })}}

Answer 1

在创建的钩子中，将组件实例分配给一个this名为的变量that并在回调中访问它，因为在回调中你在 vue 组件上下文之外（this）：

created() {

  var vm = self;

  var that=this;

  this.firstQuery(...)

      .then(function(data){

                 that.query = data;

                 console.log('firstQuery', this.query);

              

                 that.ready = true;

                 self.isLoaded(); 

            })

}

}