コンテンツをスロットにレンダリングする方法

Question

<p>以下に示すように、子コンポーネントにスロットを持つ <code>ボタン</code> を作成しました。スロットの名前は <code>slotDigitizePolygonBtnLabel</code> です。子コンポーネントの <code>button</code> には、ボタンが無効かどうかを示す <code>disabilityState</code> というプロパティが必要です。 </p> <p>親コンポーネントで、子コンポーネントの <code>button</code> をレンダリングし、<code>disabilityState</code> の値を親コンポーネントから子コンポーネントに渡したいと考えています。 </p> <p>コードを実行しても何も表示されません。どこに間違いがあるのか​​、またその修正方法を教えてください。 </p> <p>サブコンポーネント: DigitizePolygonButton.vue</strong></p> <pre class="brush:php;toolbar:false;"><テンプレート> <button id="idDigitizePolygonBtn" class="clsDigitizePolygonBtn" :disabilityState="isDigitizePolygonBtnDisabled"> <スロット名="slotDigitizePolygonBtnLabel">テキスト</slot> </ボタン> </テンプレート> <スクリプト> デフォルトのエクスポート { セットアップ(小道具) { 戻る { digitalizePolygonBtnDisabilityState: props.isDigitizePolygonBtnDisabled、 }; }、 小道具: { isDigitizePolygonBtnDisabled: { タイプ: ブール値、 必須: true、 デフォルト: false、 }、 }、 }; </script></pre> <p><strong>親コンポーネント</strong>:</p> <pre class="brush:php;toolbar:false;"><テンプレート v-slot:slotDigitizePolygonBtnLabel> <DigitizePolygonButton :disabilityState="false"> テスト </DigitizePolygonButton> </template></pre>

Answer 1

コード内のいくつかのプロパティを変更する必要があります disabledState

ではなく disableState と書きました。 リーリー

親コンポーネントでは、disabledState の代わりに isDigitizePolygonBtnDisabled プロパティを子コンポーネントに渡す必要があります。 親コンポーネントに加えられた変更:

リーリー

これらの変更を加えると問題なく動作するはずです。