Vue: 渲染异步加载的组件会导致属性更改。

创建于 2019-09-16 · 4评论 · 资料来源: vuejs/vue

版本

2.6.10

复制链接

https://codesandbox.io/s/vue-template-7hwty

重现步骤

使用渲染功能创建组件，该组件可以在一段时间后渲染另一个组件。
如果子组件具有键等于attr的prop，则承诺解析/超时后的渲染组件将导致两次渲染并更改$attrs 。
在targetComponent中注释道具并重新加载页面。
所有attrs都很好。

期望什么？

渲染函数被调用一次，并且组件的$attrs不变。

实际发生了什么？

渲染调用两次和attrs具有关键一样props子组件将被删除。

我在项目自定义加载程序组件上创建了该组件，该组件必须处理延迟加载的组件的加载和网络错误，因为我无法使用https://vuejs.org/v2/guide/components-dynamic-async.html#Handling -Loading -以我为例。通过不将下载的组件添加到反应性中（外部数据作为变量），可以忽略此错误。

bug has workaround

资料来源

Mighty683

所有4条评论

使用$attrs的副本： {...this.$attrs}也可以解决问题

posva 于 2019-09-17

❤1

也许您应该使用道具来解决此问题：

  render(h) {
    console.log("Attributes of loader:", this.$attrs);
    if (this.targetComponent) {
      return h(this.targetComponent, {
        props: this.$attrs  // Change attrs to props，not `attrs: this.$attrs`
      });
    } else {
      return h("div", "Component is loading");
    }
  }

因为你想拿道具

const targetComponent = {
  props: {
    // COMMENT PROP
    someProp: {
      type: String
    }
  },
  render(h) {
    console.log("Props of target", this.$props); // You can not get $props when render params only has attrs
    return h("div", "WITH PROP:" + this.someProp);
  }
};

joe223 于 2019-09-20

👍1

创建attrs的复制和传递props都解决了我的问题，但是我仍然好奇为什么为什么父组件$attrs会因为渲染包含相同键的props而改变呢？

Mighty683 于 2019-09-22

这是因为$attrs对象已重新分配。我知道我已经在其他地方看到此问题：
重复的https://github.com/vuejs/vue/issues/10115

posva 于 2019-09-22

此页面是否有帮助？

0 / 5 - 0 等级