各子要素のラッパーを追加する Vue 3 アクション

Question

次のようなフォーム コンポーネントがあります:

リーリー

各子の周りにラッパー div を適用するには FormComponent が必要です

上記のコードから、FormComponent の出力は次のようになります:

リーリー

Answer 1

回避策は次のとおりです:

リーリー リーリー

FormComponent.vue

リーリー

---

これは コメントで提案されているように、$slots.default() の内容をループする動作デモ です。

テンプレート構文でロジックを記述したい場合は、それが正しい方法であり、それが間違っているとは思いません。

私の傾向としては、(通常は) テンプレート構文を最小限に抑える傾向があるため、個人的には最初のアプローチを好みます。コンポーネントをオブジェクトまたはマップ構造内に保持すると、次のようなタスクを細かく制御して自動化できるようになります。

＃＃＃確認する＃＃＃

アクティビティ管理
構成オブジェクトから動的デフォルトを適用する
ブラウザ/デバイスの例外の処理
• 私の好みはおそらく、ビジネス ロジックが通常オブジェクトに保存される構成主導の環境で頻繁に作業することに由来しています。テンプレート構文で記述することに問題はありませんが、全体的に制限があると感じます。