插槽

只有在组件内才算插槽,传入 createVnode 的第三个参数

插槽本质是一个对象函数,在 render 函数中找到对应的函数,然后执行

const MyComponent = {
  setup() {
        useLifycycle()
      return {
          title:"asdfasd"
      }
  },
  render(proxy) {
      return h(Fragment, [
          h('div', proxy.$slots.header('header')),
          h('div', proxy.$slots.default()),
          h('div', proxy.$slots.footer())
      ])
  }
}

render(h(MyComponent, {}, {
  default: () => h('div', 'default'),
  header: (title) => h('h1', title),
  footer: () => h('footer', 'footer')
}), app)

createVNode 如果传入了一个对象,就是插槽

function createVNode(type, props, children = null){
  if (children) {
    let type = 0;
    if (Array.isArray(children)) {
      type = ShapeFlags.ARRAY_CHILDREN;
    } else if (isObject(children)){
        type = ShapeFlags.SLOTS_CHILDREN; // $slots 可以获取到属性
    } else {
      type = ShapeFlags.TEXT_CHILDREN;
    }
    vnode.shapeFlag |= type;
  }
}

同时,在 🔗setupComponent 函数中,把 slot 挂载到 instance.slots 上

function initSlots(instance, children) {
  instance.slots = children
}

function setupComponent(instance){
  const publicProperties = {
    //...
    $slots: (instance) => instance.slots 
  };

  const setup = type.setup; 
  const setupResult = setup(instance.props, {
      // ...
      slots: instance.slots,  
    });
  initSlots(instance,children) 
}

在 render 中传递了instance.proxy

const subTree = instance.render.call(instance.proxy, instance.proxy);
patch(instance.subTree, subTree, container);

所以在下面的 render 函数中的 $slots 就是 instance.slots,也即传入的对象函数

render(proxy) {
    return h(Fragment, [
        h('div', proxy.$slots.header('header')),
        h('div', proxy.$slots.default()),  
        h('div', proxy.$slots.footer())
    ])
}