vue3 tsx slots写法

在 Vue 3 中使用 TSX 编写组件时，slots 的写法与 Vue 2 有所不同。Vue 3 的 TSX 支持通过 slots 属性或 v-slots 指令来传递插槽内容。以下是详细的写法说明：

---

1. 默认插槽

默认插槽可以通过 slots.default 来传递内容。

示例：

import { defineComponent } from 'vue';

const ChildComponent = defineComponent({
  render() {
    return <div>{this.$slots.default?.()}</div>;
  },
});

const ParentComponent = defineComponent({
  render() {
    return (
      <ChildComponent>
        {{
          default: () => <span>This is the default slot content</span>,
        }}
      </ChildComponent>
    );
  },
});

export default ParentComponent;

---

2. 具名插槽

具名插槽可以通过 slots.slotName 来传递内容。

示例：

import { defineComponent } from 'vue';

const ChildComponent = defineComponent({
  render() {
    return (
      <div>
        <header>{this.$slots.header?.()}</header>
        <main>{this.$slots.default?.()}</main>
        <footer>{this.$slots.footer?.()}</footer>
      </div>
    );
  },
});

const ParentComponent = defineComponent({
  render() {
    return (
      <ChildComponent>
        {{
          header: () => <h1>This is the header slot</h1>,
          default: () => <p>This is the default slot content</p>,
          footer: () => <p>This is the footer slot</p>,
        }}
      </ChildComponent>
    );
  },
});

export default ParentComponent;

---

3. 作用域插槽

作用域插槽可以通过 slots.slotName 传递一个函数，函数的参数是子组件传递的数据。

示例：

import { defineComponent } from 'vue';

const ChildComponent = defineComponent({
  setup() {
    const user = { name: 'Alice', age: 25 };
    return { user };
  },
  render() {
    return (
      <div>
        {this.$slots.default?.({ user: this.user })}
      </div>
    );
  },
});

const ParentComponent = defineComponent({
  render() {
    return (
      <ChildComponent>
        {{
          default: ({ user }: { user: { name: string; age: number } }) => (
            <p>
              User: {user.name}, Age: {user.age}
            </p>
          ),
        }}
      </ChildComponent>
    );
  },
});

export default ParentComponent;

---

4. 使用 v-slots 指令

Vue 3 提供了 v-slots 指令，可以更简洁地传递插槽内容。

示例：

import { defineComponent } from 'vue';

const ChildComponent = defineComponent({
  render() {
    return (
      <div>
        <header>{this.$slots.header?.()}</header>
        <main>{this.$slots.default?.()}</main>
      </div>
    );
  },
});

const ParentComponent = defineComponent({
  render() {
    return (
      <ChildComponent
        v-slots={{
          header: () => <h1>This is the header slot</h1>,
          default: () => <p>This is the default slot content</p>,
        }}
      />
    );
  },
});

export default ParentComponent;

---

5. 插槽的简写形式

如果只有一个默认插槽，可以直接传递内容，而不需要使用 slots 属性。

示例：

import { defineComponent } from 'vue';

const ChildComponent = defineComponent({
  render() {
    return <div>{this.$slots.default?.()}</div>;
  },
});

const ParentComponent = defineComponent({
  render() {
    return (
      <ChildComponent>
        <p>This is the default slot content</p>
      </ChildComponent>
    );
  },
});

export default ParentComponent;

---

6. 总结

• 默认插槽：使用 slots.default 或直接传递内容。
• 具名插槽：使用 slots.slotName 或 v-slots 指令。
• 作用域插槽：通过函数参数接收子组件传递的数据。
• v-slots 指令：提供了一种更简洁的插槽传递方式。

通过以上方式，你可以在 Vue 3 的 TSX 中灵活使用插槽功能。