Vue 中 slot 的常用场景有哪些

1. 可定制的按钮组件

场景描述 ：创建一个通用的按钮组件，允许父组件自定义按钮的内容和样式。 子组件（Button.vue）

js 复制代码

<template>
  <button>
    <slot>默认按钮文本</slot>
  </button>
</template>

父组件

js 复制代码

<template>
  <Button>
    <span>点击我</span>
  </Button>
</template>

渲染结果

HTML 复制代码

<button>
  <span>点击我</span>
</button>

2. 布局组件

场景描述：创建一个布局组件，允许父组件自定义头部、主体和底部内容。

子组件（Layout.vue）

vue 复制代码

<template>
  <div class="layout">
    <header>
      <slot name="header">默认头部内容</slot>
    </header>
    <main>
      <slot>默认主体内容</slot>
    </main>
    <footer>
      <slot name="footer">默认底部内容</slot>
    </footer>
  </div>
</template>

父组件

vue 复制代码

<template>
  <Layout>
    <template v-slot:header>
      <h1>这是自定义头部</h1>
    </template>
    <p>这是主体内容</p>
    <template v-slot:footer>
      <p>这是自定义底部</p>
    </template>
  </Layout>
</template>

渲染结果

HTMl 复制代码

<div class="layout">
  <header>
    <h1>这是自定义头部</h1>
  </header>
  <main>
    <p>这是主体内容</p>
  </main>
  <footer>
    <p>这是自定义底部</p>
  </footer>
</div>

3. 数据展示组件

场景描述 ：创建一个数据展示组件，允许父组件自定义数据的展示方式。 子组件（UserCard.vue）

vue 复制代码

<template>
  <div class="user-card">
    <slot :user="user">默认用户信息</slot>
  </div>
</template>

<script>
export default {
  data() {
    return {
      user: { name: 'Alice', age: 25 },
    };
  },
};
</script>

父组件

vue 复制代码

<template>
  <UserCard v-slot="slotProps">
    <p>{{ slotProps.user.name }} is {{ slotProps.user.age }} years old.</p>
  </UserCard>
</template>

渲染结果

HTML 复制代码

<div class="user-card">
  <p>Alice is 25 years old.</p>
</div>

4. 表单组件

场景描述 ：创建一个表单组件，允许父组件自定义表单字段和布局。 子组件（Form.vue）

vue 复制代码

<template>
  <form>
    <slot name="fields">默认表单字段</slot>
    <button type="submit">提交</button>
  </form>
</template>

父组件

vue 复制代码

<template>
  <Form>
    <template v-slot:fields>
      <input type="text" placeholder="用户名" />
      <input type="password" placeholder="密码" />
    </template>
  </Form>
</template>

渲染结果

HTML 复制代码

<form>
  <input type="text" placeholder="用户名" />
  <input type="password" placeholder="密码" />
  <button type="submit">提交</button>
</form>

5. 列表组件

场景描述 ：创建一个列表组件，允许父组件自定义列表项的展示方式。 子组件（List.vue）

vue 复制代码

<template>
  <ul>
    <li v-for="item in items" :key="item.id">
      <slot :item="item">默认列表项内容</slot>
    </li>
  </ul>
</template>

<script>
export default {
  props: {
    items: Array,
  },
};
</script>

父组件

vue 复制代码

<template>
  <List :items="users" v-slot="slotProps">
    <p>{{ slotProps.item.name }} - {{ slotProps.item.email }}</p>
  </List>
</template>

<script>
export default {
  data() {
    return {
      users: [
        { id: 1, name: 'Alice', email: 'alice@example.com' },
        { id: 2, name: 'Bob', email: 'bob@example.com' },
      ],
    };
  },
};
</script>

渲染结果

HTML 复制代码

<ul>
  <li>
    <p>Alice - alice@example.com</p>
  </li>
  <li>
    <p>Bob - bob@example.com</p>
  </li>
</ul>

6. 模态框组件

场景描述 ：创建一个模态框组件，允许父组件自定义标题、内容和操作按钮。 子组件（Modal.vue）

vue 复制代码

<template>
  <div class="modal">
    <div class="modal-header">
      <slot name="header">默认标题</slot>
    </div>
    <div class="modal-body">
      <slot>默认内容</slot>
    </div>
    <div class="modal-footer">
      <slot name="footer">
        <button @click="close">关闭</button>
      </slot>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    close() {
      this.$emit('close');
    },
  },
};
</script>

父组件

vue 复制代码

<template>
  <Modal @close="handleClose">
    <template v-slot:header>
      <h2>自定义标题</h2>
    </template>
    <p>这是模态框的内容</p>
    <template v-slot:footer>
      <button @click="handleSave">保存</button>
      <button @click="handleClose">取消</button>
    </template>
  </Modal>
</template>

<script>
export default {
  methods: {
    handleSave() {
      console.log('保存操作');
    },
    handleClose() {
      console.log('关闭模态框');
    },
  },
};
</script>

渲染结果

HTML 复制代码

<div class="modal">
  <div class="modal-header">
    <h2>自定义标题</h2>
  </div>
  <div class="modal-body">
    <p>这是模态框的内容</p>
  </div>
  <div class="modal-footer">
    <button @click="handleSave">保存</button>
    <button @click="handleClose">取消</button>
  </div>
</div>

7. 工具栏组件

场景描述：创建一个工具栏组件，允许父组件自定义工具栏中的按钮和图标。

子组件（Toolbar.vue）

vue 复制代码

<template>
  <div class="toolbar">
    <slot>默认工具栏内容</slot>
  </div>
</template>

父组件

vue 复制代码

<template>
  <Toolbar>
    <button @click="handleAdd">添加</button>
    <button @click="handleDelete">删除</button>
    <button @click="handleSave">保存</button>
  </Toolbar>
</template>

<script>
export default {
  methods: {
    handleAdd() {
      console.log('添加操作');
    },
    handleDelete() {
      console.log('删除操作');
    },
    handleSave() {
      console.log('保存操作');
    },
  },
};
</script>

渲染结果

HTML 复制代码

<div class="toolbar">
  <button @click="handleAdd">添加</button>
  <button @click="handleDelete">删除</button>
  <button @click="handleSave">保存</button>
</div>

8. 动态内容组件

场景描述：创建一个动态内容组件，允许父组件根据条件动态插入内容。

子组件（DynamicContent.vue）

vue 复制代码

<template>
  <div>
    <slot :content="dynamicContent">默认内容</slot>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dynamicContent: '动态内容',
    };
  },
};
</script>

父组件

vue 复制代码

<template>
  <DynamicContent v-slot="slotProps">
    <p>{{ slotProps.content }}</p>
  </DynamicContent>
</template>

渲染结果

HTML 复制代码

<div>
  <p>动态内容</p>
</div>