(Vue3) tsx语法中 , 使用插槽Slot

1. 默认插槽（Default Slot）

<Input>
    <div>默认插槽内容</div>
</Input>

　　等价于模板语法：

<Input>
  <template #default>
    <div>默认插槽内容</div>
  </template>
</Input>

2. 具名插槽（Named Slot）

<Input>
    {{
        default: () => <div>默认内容</div>,
        prepend: () => <div>前面的内容</div>,
        append: () => <div>后面的内容</div>
    }}
</Input>

等价于模板语法：

<Input>
  <template #default>
    <div>默认内容</div>
  </template>
  <template #prepend>
    <div>前面的内容</div>
  </template>
  <template #append>
    <div>后面的内容</div>
  </template>
</Input>

3. 作用域插槽（Scoped Slot）

如果子组件通过插槽传递了数据，比如：

// 子组件内部
slots.default?.({ msg: 'Hello from child' })

父组件可以这样接收数据：

<Input>
    {{
        default: ({ msg }) => (
            <div>接收到插槽数据：{msg}</div>
        )
    }}
</Input>

 

注意事项:

• 插槽在 JSX 中是一个对象，通过键名（如 default, prepend）来定义；
• 插槽内容必须返回 VNode，因此要用函数包装（() => <Component />）；