コンテンツをスロットにレンダリングする方法
<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>
