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

Posted 2023-02-23

【中文标题】承诺解决并将道具传递给嵌套子项时如何更新Vue组件

【英文标题】：How to update Vue component when promise resolve AND passing props to nested children

【发布时间】：2020-12-02 15:30:42

【问题描述】：

我有父组件和子组件。父母的数据是在 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
                 
            )

【参考方案1】：

在 created 钩子中，将组件实例 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(); 
            )

【讨论】：

哦，谢谢@Boussadjra Brahim 我对承诺中的“this”对象感到困惑。我在 Promise 中使用 "console.log('firstQuery', this.query) 来检查是否更新，但我只是在 Promise 上创建了一个属性。

附注我查看了您的个人资料 - 您可能想在组件的 git 页面（vueye 等）中添加演示

不客气，感谢您访问我的个人资料，如果您查看组件存储库，您会找到演示