現在、Vue 2 コードベースを Vue 3 に移行中です。
<テンプレート #デフォルト> <カードヘッダー> ヘッダー <カード本体 v-for="「f" in bodycount」 :key=""'f'" b"" 本文 {{ b }} < カード本体> <カードフッター footercount」 f""フッター f }}< text> カードフッター> テンプレート> card>< pre> card コンポーネントには、
this.$slots.default()< code> を呼び出すレンダリング関数があります。ただし、vue 3 では、vue 2 とは異なるコンテンツが返されます。したがって、console.log(this.$slots.default())< を実行すると、3 つの要素を含む配列が得られます [v ノードのタイプ "header"、タイプ これは v ノードですsymbol(fragment)、タイプ symbol(fragment) の ノード]< p>より具体的には、カード フッター/カード本体をコンポーネントとして認識せず、代わりにタイプのシンボル (フラグメント) が表示されます。 Card-header は v-for ループ内にないため、実際には問題ありません。
カード コンポーネントのレンダリング関数内には、テキスト/フッター コンポーネントがいくつあるかを知る必要があるロジックがあります。したがって、コンポーネントの種類を伝えることができる必要があります。 Vue3では無理なのでしょうか？これはここの v-for と関係があると推測できますが、実際に最終的な v-node を取得する方法がわかりません。この例では、配列に 3 つの要素ではなく、カード ヘッダー、すべてのカード本体、すべてのカード フッターが含まれるようにします。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
カード コンポーネントのデザインは私には意味がありません。再考することをお勧めします。
これはシンプルなプレイグラウンド レンダリング スロットです
警告に注意してください。 Vue は
リーリーcard-headerを解析できないため、ここではレンダリングしません。データにアクセスできる場合、
slotsアクションcard-body/card-footerアイテムをbodyCount 経由で直接渡すのはなぜですか??それが私にとって合理的ではないと思われる場合。
結局のところ、フラグメントは配列の各要素の Children プロパティを介して展開できることがわかりました。したがって、この場合、v-for はフラグメントである v ノードを生成しますが、Children プロパティを調べることでさらに多くのことを推測できます。