Vue: 非同期でロードされたコンポーネントをレンダリングすると、属性が変更されます。

作成日 2019年09月16日  ·  4コメント  ·  ソース: vuejs/vue

バージョン

2.6.10

複製リンク

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

再現する手順

  1. 時間の経過後に別のコンポーネントをレンダリングできるレンダリング機能を使用してコンポーネントを作成します。
  2. promiseの解決/タイムアウト後にコンポーネントをレンダリングすると、レンダリングが2回発生し、子コンポーネントにattrと等しいキーを持つpropがある場合、 $attrs変更されます。
  3. targetComponentのpropにコメントし、ページをリロードします。
  4. すべての属性は再び問題ありません。

何が期待されますか?

レンダリング関数は1回呼び出され、コンポーネントの$attrsは変更されません。

実際に何が起こっているのですか?

レンダーが2回呼び出され、子コンポーネントのpropsと同じキーを持つattrsが削除されます。


https://vuejs.org/v2/guide/components-dynamic-async.html#Handling -Loadingを使用できないため、遅延読み込みコンポーネントの読み込みとネットワークエラーを処理する必要があるカスタムローダーコンポーネントをプロジェクトで作成しました-私の場合は述べてください。 このバグは、ダウンロードしたコンポーネントを反応性に追加しないことで省略できます(変数としての外部データ)。

bug has workaround

全てのコメント4件

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

属性のコピーを作成することと小道具を渡すことの両方で問題は解決しますが、同じキーを持つ小道具を​​含む子をレンダリングするために親コンポーネント$attrsが変更されるのはなぜですか?

これは、 $attrsオブジェクトが再割り当てされたためです。 私はこの問題がすでにどこかで見られたことを知っていました:
https://github.com/vuejs/vue/issues/10115の複製

このページは役に立ちましたか?
0 / 5 - 0 評価