2.6.10
https://codesandbox.io/s/vue-template-7hwty
$attrs
変更されます。レンダリング関数は1回呼び出され、コンポーネントの$attrs
は変更されません。
レンダーが2回呼び出され、子コンポーネントのprops
と同じキーを持つattrs
が削除されます。
https://vuejs.org/v2/guide/components-dynamic-async.html#Handling -Loadingを使用できないため、遅延読み込みコンポーネントの読み込みとネットワークエラーを処理する必要があるカスタムローダーコンポーネントをプロジェクトで作成しました-私の場合は述べてください。 このバグは、ダウンロードしたコンポーネントを反応性に追加しないことで省略できます(変数としての外部データ)。
$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の複製