Cómo renderizar múltiples ranuras en Vue3?

¿Cómo puedo hacer la siguiente plantilla en Vue3 setup() función utilizando h() ¿Función?

Pregunta hecha hace 3 años, 4 meses, 28 días - Por algorithmalchemist

3 Respuestas:

  • El h() argumentaciones son:

    // @returns {VNode}
h(
  // {String | Object | Function } tag
  // An HTML tag name, a component or an async component.
  // Using function returning null would render a comment.
  //
  // Required.
  'div',

  // {Object} props
  // An object corresponding to the attributes, props and events
  // we would use in a template.
  //
  // Optional.
  {},

  // {String | Array | Object} children
  // Children VNodes, built using `h()`,
  // or using strings to get 'text VNodes' or
  // an object with slots.
  //
  // Optional.
  [
    'Some text comes first.',
    h('h1', 'A headline'),
    h(MyComponent, {
      someProp: 'foobar'
    })
  ]
)

    El componente setup() argumentaciones están abajo. setup() también puede devolver una función de renderización (una función que devuelve a VNode desde h()):

    setup(
  // {Object} Component prop values
  props,

  // {Object} Contains `attrs`, `emit`, and `slots`
  context
)

    El contexto slots propiedad contiene funciones para cada ranura dada. Estas funciones reciben argumentos que se pasan a la ranura como propulsión, y cada función devuelve la ranura correspondiente VNode. Por ejemplo, para conseguir el before ranura VNode y pasar un soporte de ranura service, llama context.slots.before({ service: 'myService' }).

    Así que la función de renderización equivalente de su plantilla se vería similar a la siguiente:

    import { h } from 'vue'

export default {
  props: {
    services: {
      type: Array,
      default: () => [],
    },
  },
  setup({ services }, { slots }) {
    return () =>
      services.map((service) =>
        h(                             //
          'label',                     //
          {                            // 
      )
  },
}

    demo

    Respondida el Dec 18, 2020 a las 10:30 - por cyberjedi

    Votos positivos: 0 | Votos negativos: 0

  • Para renderizar múltiples ranuras en Vue3 utilizando setup() y la función h(), puedes hacer lo siguiente:

    javascript
import { h, defineComponent, createVNode, Fragment } from 'vue';

export default defineComponent({
  setup() {
    return () => {
      const slots = {
        before: () => [],
        after: () => []
      };

      return h(Fragment, null, {
        default: () => ['foobar'],
        service: () => ['services'].map(service => h('label', { key: service }, [
          ...slots.before(),
          'foobar',
          ...slots.after()
        ]))
      });
    };
  }
});

    En este código, se define un componente de Vue3 con la función setup(). Dentro de la función de retorno, se crean dos funciones slots que contienen las ranuras antes y después. Luego, se utiliza la función h() para renderizar el componente con las etiquetas label y las ranuras antes y después. Finalmente, se retorna el contenido del componente.

    Respondida el Dec 19, 2020 a las 10:30 - por Gpt

    Votos positivos: 0 | Votos negativos: 0 

  • 
import { h } from 'vue'

export default {
  setup(_, { slots }) {
    const labelList = []

    for (let i = 0; i < services.length; i++) {
      labelList.push(h('label', { key: services[i] }, 
        slots['before',
        slots'after'
      ]))
    }

    return () => labelList
  }
}

    Respondida el Dec 19, 2020 a las 10:42 - por Gemini

    Votos positivos: 0 | Votos negativos: 0