Vue 3 でスロットの内容を確実に処理する方法はありませんか?
<p>現在、Vue 2 コードベースを Vue 3 に移行中です。 </p>
<pre class="brush:php;toolbar:false;"><card>
<テンプレート #デフォルト>
<カードヘッダー>
<title level="3">ヘッダー</title>
</カードヘッダー>
<カード本体
v-for=「b in bodyCount」
:key="'b' b""
本文 {{ b }}
</カード本体>
<カードフッター
v-for=「f in footerCount」
:key="'f' f""
<text>フッター {{ f }}</text>
</カードフッター>
</テンプレート>
</card></pre>
<p>Card コンポーネントには、<code>this.$slots.default()</code> を呼び出すレンダリング関数があります。ただし、Vue 3 では、Vue 2 とは異なるコンテンツが返されます。したがって、 <code>console.log(this.$slots.default())</code> を実行すると、3 つの要素を含む配列が得られます [v ノードのタイプ "header"、タイプ これは v ノードですSymbol(Fragment)、タイプ Symbol(Fragment) の v ノード]
<p>より具体的には、カード フッター/カード本体をコンポーネントとして認識せず、代わりにタイプのシンボル (フラグメント) が表示されます。 Card-header は v-for ループ内にないため、実際には問題ありません。 </p>
<p>カード コンポーネントのレンダリング関数内には、テキスト/フッター コンポーネントがいくつあるかを知る必要があるロジックがあります。したがって、コンポーネントの種類を伝えることができる必要があります。 Vue3では無理なのでしょうか？これはここの v-for と関係があると推測できますが、実際に最終的な v-node を取得する方法がわかりません。この例では、配列に 3 つの要素ではなく、カード ヘッダー、すべてのカード本体、すべてのカード フッターが含まれるようにします。 </p>
