vuejs/vue-vapor

Component slots

ubugeeei opened this issue · 7 comments

ubugeeei commented
  • <slot> in child component
  • pass slot from parent component
    • Demo
    • static slot / dynamic named slot
    • slot props
    • slot + v-if / v-else / v-else-if
    • slot + v-for
    • perf dynamic slots, finer update granularity
LittleSound commented

I am trying to implement this issue, I noticed that currently slot outlets need to be obtained through the instance, do we need to create a createSlot function to handle this?

function render(_ctx) {
 // some codess

  const n3 = _createSlot('default', {
    foo: ()=> _ctx.bar
  }, () => {
    return _template('<div>fallback content</div>')
  })

 // some codes
}
ubugeeei commented

I see. Is this similar to the discussion here?
#84
#74 (comment)

Is it not good to directly reference currentInstance or use getCurrentInstance?

ubugeeei commented

Considering props and attrs as well, it might be better to have a function that directly references the instance or a function for accessing parts of it, rather than creating createSlot. 🤔
getCurrentInstance, or getSlots, getAttrs, getProps, .... 🤔 🤔

What do you think? cc @sxzz

LittleSound commented

I think it is necessary, because for complex requirements such as dynamic slot outlets (<slot :name="foo" />), encapsulating functions can reduce the complexity of generating code.

  • 👍1
ubugeeei commented

Indeed. That might be better.

sxzz commented

I think createSlots is a proper abstraction considering scope slot is a pretty complex feature.

  • 👍1
LittleSound commented

We have available slot features. Next, I will focus more on the related lifecycle hooks.

  • 🎉5
  • 🚀2