Vue（slot）插槽

vue插槽

插槽作用：让组件内部的一些结构支持自定义。

1 默认插槽

默认插槽基本语法：
1.组件内需要定制的结构部分，改用占位
2.使用组件时,直接在标签内部,传入结构替换slot
需求：在页面中显示两个列表 一个是员工信息列表 一个是学生信息列表 对组件中的地方进行定制

默认插槽只能完成一个位置的定制 如果还想完成多个地方的定制就要使用具名插槽
AnLi.vue组件代码：

<template>
  <div class="box">
    <!-- 1在需要定制的地方进行<slot></slot>占位 -->
    <slot>我是备用内容 如果不插槽我将会显示</slot>
    <table
      style="border-collapse: collapse; width: 500px; text-align: center"
      align="center"
      border="1"
    >
      <tr>
        <th>序号</th>
        <th>姓名</th>
        <th>年龄</th>
        <th>操作</th>
      </tr>
      <tr>
        <td>1</td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
    </table>
  </div>
</template>

<script>
export default {};
</script>

<style scoped>
h1 {
  text-align: center;
}
</style>

App.vue组件代码：

<template>
  <div id="app">
    <!-- 2在使用组件时。在其标签内填入内容  在这里使用AnLi组件 填入<h1>员工信息列表</h1>内容 -->
    <AnLi>
      <h1>员工信息列表</h1>
    </AnLi>
    <AnLi>
      <h1>学生信息列表</h1>
    </AnLi>
  </div>
</template>

<script>
import AnLi from "./components/AnLi.vue";
export default {
  data() {
    return {};
  },
  components: {
    AnLi,
  },
};
</script>

<style scoped>
img {
  display: block;
  width: 500px;
  margin: 0 auto;
}
</style>

运行结果：

2 具名插槽

具名插槽基本语法：
1 多个slot使用name属性区分名字
2 .template配合v-slot:名字来分发对应标签 v-slot可以用#进行简写

AnLi.vue组件代码：

<template>
  <div class="box">
    <!-- 1在需要定制的地方进行<slot></slot>占位 并给name属性 -->
    <slot name="biaoti">我是备用内容 如果不插槽我将会显示</slot>

    <slot name="tupian"></slot>

    <table
      style="border-collapse: collapse; width: 500px; text-align: center"
      align="center"
      border="1"
    >
      <tr>
        <th>序号</th>
        <th>姓名</th>
        <th>年龄</th>
        <th>操作</th>
      </tr>
      <tr>
        <td>1</td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
    </table>
  </div>
</template>

<script>
export default {};
</script>

<style scoped>
h1 {
  text-align: center;
}
</style>

app.vue组件代码：

<template>
  <div id="app">
    <!-- 2在使用组件时。在其标签内填入内容  在这里使用AnLi组件  -->
    <AnLi>
      <!-- template配合v-slot:名字来分发对应标签 -->
      <template v-slot:biaoti>
        <h1>员工信息列表</h1>
      </template>
      //此处v-slot用简写方式
      <template #tupian>
        <img src="../img/1.jpg" alt="" />
      </template>
    </AnLi>
    <AnLi>
      <h1>学生信息列表</h1>
    </AnLi>
  </div>
</template>

<script>
import AnLi from "./components/AnLi.vue";
export default {
  data() {
    return {};
  },
  components: {
    AnLi,
  },
};
</script>

<style scoped>
img {
  display: block;
  width: 500px;
  margin: 0 auto;
}
</style>

运行结果：

作用域插槽

作用域插槽:定义 slot 插槽的同时是可以传值的。给插槽上可以绑定数据，将来使用组件时可以用。

AnLi.vue组件代码：

<template>
  <div class="box">
    <!-- 1在需要定制的地方进行<slot></slot>占位 并给name属性 -->
    <slot name="biaoti">我是备用内容 如果不插槽我将会显示</slot>

    <table
      style="border-collapse: collapse; width: 500px; text-align: center"
      align="center"
      border="1"
    >
      <tr>
        <th>序号</th>
        <th>姓名</th>
        <th>年龄</th>
        <th>操作</th>
      </tr>
      <tr v-for="(item, index) in list" :key="item.id">
        <td>{{ index + 1 }}</td>
        <td>{{ item.name }}</td>
        <td>{{ item.age }}</td>
        <td>
          <!-- 1此处传值:row="item" msg="测试传参"  给父组件使用 -->
          <slot name="caozuo" :row="item" msg="测试传参"></slot>
          <!-- 2将所有属性添加到一个对象  app组件接受到的是一下对象
          {
            row: {…}, 
            msg: '测试传参'
          }
           -->
        </td>
      </tr>
    </table>
  </div>
</template>

<script>
export default {
  props: ["list"],
};
</script>

<style scoped>
h1 {
  text-align: center;
}
</style>

App.vue组件代码：

<template>
  <div id="app">
    <!-- 2在使用组件时。在其标签内填入内容  在这里使用AnLi组件  -->
    <AnLi :list="list">
      <!-- template配合v-slot:名字来分发对应标签 -->
      <template v-slot:biaoti>
        <h1>员工信息列表</h1>
      </template>
      <!-- 此处接受  用obj接受到 slot标签传递过来的对象-->
      <template #caozuo="obj">
        <!-- 此处需要拿到要删除的id  item。id -->
        <button @click="del(obj.row.id)">删除</button>
      </template>
    </AnLi>
    <hr />
    <hr />
    <AnLi :list="list2">
      <template v-slot:biaoti>
        <h1>学生信息列表</h1>
      </template>
      <template #caozuo="item">
        <button @click="show(item)">查看</button>
      </template>
    </AnLi>
  </div>
</template>

<script>
import AnLi from "./components/AnLi.vue";
export default {
  data() {
    return {
      list: [
        { id: 1, name: "赵露思", age: 17 },
        { id: 2, name: "小李子", age: 37 },
        { id: 3, name: "迪丽热巴", age: 27 },
      ],
      list2: [
        { id: 1, name: "小米", age: 17 },
        { id: 2, name: "小名", age: 37 },
        { id: 3, name: "小红", age: 27 },
      ],
    };
  },
  components: {
    AnLi,
  },
  methods: {
    del(id) {
      // console.log(id);
      this.list = this.list.filter((item) => item.id !== id);
    },
    show(item) {
      // console.log(item);
      alert(`姓名：${item.row.name}  年龄：${item.row.age}`);
    },
  },
};
</script>

<style scoped>
img {
  display: block;
  width: 500px;
  margin: 0 auto;
}
</style>

运行结果：