Vue: 비동기로드 된 구성 요소를 렌더링하면 속성이 변경됩니다.

$attrs : {...this.$attrs} 의 복사본을 사용하면 문제가 제거됩니다.

이 문제를 해결하려면 소품을 사용해야합니다.

  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);
  }
};

속성을 복사하고 props로 전달하면 문제가 해결되지만 동일한 키를 가진 props를 포함하는 자식을 렌더링하기 때문에 부모 구성 요소 $attrs 이 왜 변경되는지 궁금합니다.

$attrs 개체가 재 할당 되었기 때문입니다. 나는 이미 다른 곳에서이 문제를 보았다는 것을 알고 있었다.
https://github.com/vuejs/vue/issues/10115의 중복