Estoy tratando de construir mi propio componente ordenable . Quiero pasar una lista de elementos a su ranura predeterminada. El componente clasificable debe envolver todos los elementos pasados con un componente v-draggable personalizado.
<v-sortable handle=".handle"> <template :key="index" v-for="(item, index) in items"> <some-complex-component :item="item"></some-complex-component> </template> </v-sortable> Ahora, con mi componente v-sortable , estoy tratando de envolver todos los nodos dados dentro de la ranura predeterminada con un componente v-draggable personalizado. Mi componente v-sortable se ve así:
import { h } from 'vue'; export default { name: 'v-sortable', props: { handle: { type: String, required: false, default: () => { return null; } }, }, render () { const draggableItems = this.$slots.default().map(slotItem => h('v-draggable', { handle: this.handle }, [slotItem]) ) return draggableItems; } } Esto funciona como se esperaba, excepto que mi componente personalizado v-draggable no se representará como un componente vue. Todos los elementos se envolverán en etiquetas html llamadas <v-draggable> . ¿Cómo tendría que proceder para analizar realmente el componente v-draggable como componente Vue?
Intente importarlo y registrarse y usarlo directamente:
import { h } from 'vue'; import VDraggable from 'path/to/v-draggable' export default { name: 'v-sortable', props: { handle: { type: String, required: false, default: () => { return null; } }, }, render () { const draggableItems = this.$slots.default().map(slotItem => h(VDraggable, { handle: this.handle }, [slotItem]) ) return draggableItems; } }Se recomienda pasar elementos como accesorios y usarlos directamente dentro de la función de renderizado:
<v-sortable handle=".handle" :items="items"> </v-sortable>componente hijo:
import { h } from 'vue'; import VDraggable from 'path/to/v-draggable' export default { name: 'v-sortable', props: { items:{ type:Array, default: () =>[] }, handle: { type: String, required: false, default: () => { return null; } }, }, render () { const draggableItems = this.items.map(slotItem => h(VDraggable, { handle: this.handle }, [item]) ) return draggableItems; } }El componente puede especificarse explícitamente en la función de representación:
h(VDraggable, ...) El componente registrado globalmente que no está disponible para la importación (por ejemplo, de bibliotecas de terceros) se puede resolver a partir de un nombre con resolveComponent .