Vue中插槽slot的用法详解

<template>
  <div class="child">
    <h2>我是子组件的标题</h2>
    <!-- 默认插槽 -->
    <slot></slot>
  </div>
</template>

<template>
  <div>
    <DefaultSlotChild>
      <!-- 这里的内容会被渲染到子组件的默认插槽中 -->
      <p>这是来自父组件的默认插槽内容1</p>
      <p>这是来自父组件的默认插槽内容2</p>
    </DefaultSlotChild>
  </div>
</template>

<script>
import DefaultSlotChild from './DefaultSlotChild.vue';

export default {
  components: {
    DefaultSlotChild
  }
}
</script>

<template>
  <div class="child">
    <h2>我是子组件的标题</h2>
    <!-- 默认插槽，带有后备内容 -->
    <slot>这是默认插槽的后备内容</slot>
  </div>
</template>

<template>
  <div class="child">
    <header>
      <!-- 具名插槽: header -->
      <slot name="header"></slot>
    </header>
    <main>
      <!-- 默认插槽 -->
      <slot></slot>
    </main>
    <footer>
      <!-- 具名插槽: footer -->
      <slot name="footer"></slot>
    </footer>
  </div>
</template>

<template>
  <NamedSlotChild>
    <template v-slot:header>
      <!-- 这里的内容会被渲染到子组件的header插槽中 -->
      <h1>这是标题</h1>
    </template>
    <p>这是默认插槽的内容。</p>
    <template v-slot:footer>
      <!-- 这里的内容会被渲染到子组件的footer插槽中 -->
      <p>这是页脚</p>
    </template>
  </NamedSlotChild>
</template>

<script>
import NamedSlotChild from './NamedSlotChild.vue';

export default {
  components: {
    NamedSlotChild
  }
}
</script>

<template #header>
  <!-- 这里的内容会被渲染到子组件的header插槽中 -->
  <h1>这是标题</h1>
</template>

<template>
  <ul>
    <li v-for="item in items" :key="item.id">
      <slot name="item" :item="item">{{ item.text }}</slot>
    </li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, text: '苹果' },
        { id: 2, text: '香蕉' },
        { id: 3, text: '橙子' }
      ]
    }
  }
}
</script>

<template>
  <ScopedSlotChild>
    <template v-slot:item="slotProps">
      <!-- 使用slotProps访问子组件传递的数据 -->
      <strong>{{ slotProps.item.text }}</strong>
    </template>
  </ScopedSlotChild>
</template>

<script>
import ScopedSlotChild from './ScopedSlotChild.vue';

export default {
  components: {
    ScopedSlotChild
  }
}
</script>

<template>
  <div>
    <MyTable :data="list1">
      <!-- 使用插槽 -->
      <template #default="obj">
        <button @click="del(obj.row.id)">删除</button>
      </template>
    </MyTable>
    <MyTable :data="list2">
      <template v-slot:default="{ row }">
        <button @click="show(row)">查看</button>
      </template>
    </MyTable>
  </div>
</template>

<script>
import MyTable from './components/MyTable.vue';

export default {
  data() {
    return {
      list1: [
        { id: 1, name: '赵天明', age: 25 },
        { id: 2, name: '李翔飞', age: 22 },
        { id: 3, name: '吴国基', age: 24 }
      ],
      list2: [
        { id: 4, name: '王小明', age: 26 },
        { id: 5, name: '张小丽', age: 23 },
        { id: 6, name: '李大力', age: 27 }
      ]
    };
  },
  methods: {
    del(id) {
      this.list1 = this.list1.filter(item => item.id !== id);
    },
    show(row) {
      alert(`姓名:${row.name}; 年龄:${row.age}`);
    }
  },
  components: {
    MyTable
  }
}
</script>

<template>
  <div class="my-table">
    <table>
      <thead>
        <tr>
          <th>ID</th>
          <th>姓名</th>
          <th>年龄</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="row in data" :key="row.id">
          <td>{{ row.id }}</td>
          <td>{{ row.name }}</td>
          <td>{{ row.age }}</td>
          <td>
            <!-- 使用插槽来渲染操作列 -->
            <slot :row="row"></slot>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  name: 'MyTable',
  props: {
    data: {
      type: Array,
      required: true
    }
  }
}
</script>

<style scoped>
.my-table {
  width: 100%;
  border-collapse: collapse;
}

.my-table th, .my-table td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}

.my-table th {
  background-color: #f2f2f2;
}
</style>