レンダリング関数を使用してカスタム コンポーネント内のすべての項目をラップする Vue 3 のトリック

Question

独自の sortable コンポーネントを構築しようとしています。アイテムのリストをデフォルトのスロットに渡したいと考えています。並べ替え可能なコンポーネントは、渡されたすべての項目をカスタム v-draggable コンポーネントでラップする必要があります。

リーリー

今、v-sortable コンポーネントを使用して、カスタム v-draggable コンポーネントを使用して、指定されたすべてのノードをデフォルトのスロットにラップしようとしています。 私の v-sortable コンポーネントは次のようになります:

リーリー

これは期待どおりに動作しますが、カスタム コンポーネント v-draggable が vue コンポーネントとしてレンダリングされない点が異なります。すべての項目は、 という名前の HTML タグで囲まれます。 v-draggable コンポーネントを実際に Vue コンポーネントに解決するにはどうすればよいですか?

Answer 1

コンポーネントは render 関数で明示的に指定できます:

リーリー

インポートできないグローバルに登録されたコンポーネント (例: サードパーティ ライブラリから) は、resolveComponent を介して解決できます。

Answer 2

直接インポートして登録して使用してみます:

リーリー

アイテムを小道具として渡し、レンダリング関数で直接使用することをお勧めします。

リーリー

サブアセンブリ:

リーリー