¿Es posible usar el <component> de Vue para renderizar condicionalmente un componente o nada en su lugar?
Por ejemplo, considere el siguiente patrón:
<component :is="hasTooltip ? 'CustomTooltip' : 'div'"> <div>Hover over me!</div> </component> En este caso, representamos un componente CustomTooltip cuando el valor de hasTooltip es verdadero; de lo contrario, representamos un div normal. ¿Es posible representar un fragmento en lugar de este div (como el fragmento <> en React) que se eliminará en el navegador? ¿Cómo podría lograrse esto? Estoy en Vue 2.0.
La renderización condicional del componente no funcionará porque queremos el mensaje "¡Pase el cursor sobre mí!" texto para representar independientemente.
¿Algo como esto tal vez?
Vue.component('tooltip', { template: `<div> Tooltip for: <slot></slot> </div>` }) Vue.component('wrap-if', { functional: true, props: ['wrap', 'wrapper'], render(h, ctx) { if (ctx.props.wrap) { return h(ctx.props.wrapper, ctx.data, ctx.children) } else { // maybe check that children.length === 1 as Vue 2 does not support fragments return ctx.children } } }) new Vue({ el: '#app', data: { wrap: true } }) <script src="https://unpkg.com/vue@2.6.14/dist/vue.js"></script> <div id="app"> <wrap-if :wrap="wrap" wrapper="tooltip"> <span>This is always rendered no matter what</span> </wrap-if> <br> <button @click="wrap = !wrap">Toggle</button> <pre>{{$data}}</pre> </div>Solo consolidando algunos otros comentarios sobre esto en una respuesta.
Parece que no hay una forma limpia de envolver condicionalmente un componente sin un complemento en Vue-2, porque los fragmentos no están disponibles.
Sin embargo, este mismo patrón se puede lograr con un complemento de fragmento Vue-2 o en Vue3, con el uso del componente de fragment , como en esta respuesta. En lugar de renderizar el div, renderice el fragmento.