¿Hay algo como React.Fragment en Vue?

Solución:

Recientemente utilicé este paquete. https://www.npmjs.com/package/vue-fragment.

Es un componente de fragmento para Vue.js. Básicamente proporciona componentes sin raíz.

¡La falta de un componente Fragmento de primera parte en Vue me vuelve loco!

Había mirado el vue-fragment npm, pero me puso nervioso lo mucho que estaban haciendo y sentí que tenía que haber una mejor manera.

Se me ocurrió algo extremadamente ligero … Funciona porque los componentes funcionales pueden devolver múltiples nodos raíz.

Sin embargo, esto no funciona al 100% como Reacts. En React, puedes usar un React.Fragment como el nodo raíz en su aplicación, por ejemplo. Esto parece funcionar solo en Vue cuando ya está dentro de un componente (es decir, no puede ser el nodo raíz de su componente base).

const Fragment = {
  functional: true,
  render: (h, ctx) => ctx.children
}

para usarlo …

<Fragment>
  <div>Div 1</div>
  <div>Div 2</div>
</Fragment>

Super útil …

{someCondition && (
  <Fragment>
    <div>yay i can use multiple nodes</div>
    <div>:)</div>
  </Fragment>
)}

<div>
  Some inline text {condition ? (
    <Fragment>now I can use <strong>html</strong> and {variables}</Fragment>
  ) : (
    <Fragment>So many possibilities</Fragment>
  )}
</div>

Aparentemente, Vue.js v3 ahora admite fragmentos listos para usar: Fragmentos (documentación de Vue.js)

---

---

Utiliza Nuestro Buscador