【vue2第十四章】插槽(普通插槽、具名插槽、作用域插槽语法)

news2024/10/6 4:09:24

插槽

插槽是什么？
在 Vue 2 中，插槽（slot）是一种用于定义组件内部内容分发的机制。它允许你将组件中的一部分内容替换为用户自定义的内容，并在组件内部进行渲染。

通过在组件模板中使用 <slot></slot> 标签，你可以指定一个插槽的位置。这个位置可以被父组件中的任意内容所填充。父组件中的内容将被插入到插槽所在的位置，并最终与组件的其他部分一起进行渲染。

普通插槽

在这里插入图片描述
首先建立弹窗组件，在内容的位置添加 <slot></slot> 标签：

<template>
  <div class="dialog">
    <div class="dialog-header">
      <h3>友情提示</h3>
      <span class="close">✖️</span>
    </div>

    <div class="dialog-content">
      <!-- 为组件添加插槽 -->
      <slot>你确认要退出本系统么?</slot>
    </div>
    <div class="dialog-footer">
      <button>取消</button>
      <button>确认</button>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
    }
  }
}
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}
.dialog {
  width: 470px;
  height: 230px;
  padding: 0 25px;
  background-color: #ffffff;
  margin: 40px auto;
  border-radius: 5px;
}
.dialog-header {
  height: 70px;
  line-height: 70px;
  font-size: 20px;
  border-bottom: 1px solid #ccc;
  position: relative;
}
.dialog-header .close {
  position: absolute;
  right: 0px;
  top: 0px;
  cursor: pointer;
}
.dialog-content {
  height: 80px;
  font-size: 18px;
  padding: 15px 0;
}
.dialog-footer {
  display: flex;
  justify-content: flex-end;
}
.dialog-footer button {
  width: 65px;
  height: 35px;
  background-color: #ffffff;
  border: 1px solid #e1e3e9;
  cursor: pointer;
  outline: none;
  margin-left: 10px;
  border-radius: 3px;
}
.dialog-footer button:last-child {
  background-color: #007acc;
  color: #fff;
}
</style>

在父组件中引入组件，并且在组件标签中写入内容。如果不写将展示默认 <slot></slot> 标签里面的文字，默认内容，也叫做后备内容。

<!-- 结构 -->
<template>
  <div id="app">
    <!-- 组件标签中的内容将自动填充到插槽中，如果其中不写内容将展示 上面slot标签中的“你确认要退出本系统么?” -->
    <MyDialog>你好！欢迎使用vue2</MyDialog>
  </div>
</template>

<!-- 行为 -->
<script>
// import MyBodys from './components/MyBodys.vue';
import MyDialog from './components/MyDialog.vue';
export default {
  name: "App",
  data() {
    return {
    };
  },
  components:{
    MyDialog
  }
};
</script>

<!-- 样式 -->
<style>
#app {
  width: 100%;
  height: 700px;
  background-color: rgb(167, 167, 167);
  overflow: hidden;
}
*{
  margin: 0;
  padding: 0;
}
</style>

最后效果成功填充了弹窗中的内容：
在这里插入图片描述

具名插槽

一个组件可以拥有多个插槽，每个插槽可以有不同的名称，以便在父组件中选择性地进行内容分发。父组件可以使用 <template> 和 <slot> 标签的 name 属性来决定插槽的位置和名称。

插槽的使用可以使组件更具灵活性，让父组件能够向子组件传递不同的内容，并在组件内部进行渲染。这在构建可重用的组件和布局时非常有用。

在这里插入图片描述
比如其中 弹出框的标题，内容，以及按钮都不一样，我们就可以使用具名插槽来更改代码，为slot标签取名(name属性)
为组件中的slot取名：

<template>
  <div class="dialog">
    <div class="dialog-header">
      <!-- 标题取名 -->
      <h3 ><slot name="title">友情提示</slot></h3>
      <span class="close">✖️</span>
    </div>

    <div class="dialog-content">
      <!-- 为组件添加插槽，内容取名 -->
      <slot name="content">你确认要退出本系统么?</slot>
    </div>
    <div class="dialog-footer">
      <!-- 尾部按钮取名 -->
      <slot name="button">
        <button>取消</button>
        <button>确认</button>
      </slot>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
    }
  }
}
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}
.dialog {
  width: 470px;
  height: 230px;
  padding: 0 25px;
  background-color: #ffffff;
  margin: 40px auto;
  border-radius: 5px;
}
.dialog-header {
  height: 70px;
  line-height: 70px;
  font-size: 20px;
  border-bottom: 1px solid #ccc;
  position: relative;
}
.dialog-header .close {
  position: absolute;
  right: 0px;
  top: 0px;
  cursor: pointer;
}
.dialog-content {
  height: 80px;
  font-size: 18px;
  padding: 15px 0;
}
.dialog-footer {
  display: flex;
  justify-content: flex-end;
}
.dialog-footer button {
  width: 65px;
  height: 35px;
  background-color: #ffffff;
  border: 1px solid #e1e3e9;
  cursor: pointer;
  outline: none;
  margin-left: 10px;
  border-radius: 3px;
}
.dialog-footer button:last-child {
  background-color: #007acc;
  color: #fff;
}
</style>

为父组件的组件标签添加template标签，配合子组件:

<!-- 结构 -->
<template>
  <div id="app">
    <!-- 组件标签中的内容将自动填充到插槽中 -->
    <MyDialog>
      <!-- 使用v-slot:title与组件中name属性为title的slot绑定 -->
      <template v-slot:title>我是标题</template>
      <!-- 使用v-slot:content与组件中name属性为content的slot绑定 -->
      <template v-slot:content>我是内容</template>
      <!-- #button是v-slot:button的简写 -->
      <template #button>
        <button>取消</button>
        <button>确认</button>
      </template>
    </MyDialog>
  </div>
</template>

<!-- 行为 -->
<script>
// import MyBodys from './components/MyBodys.vue';
import MyDialog from './components/MyDialog.vue';
export default {
  name: "App",
  data() {
    return {
    };
  },
  components:{
    MyDialog
  }
};
</script>

<!-- 样式 -->
<style>
#app {
  width: 100%;
  height: 700px;
  background-color: rgb(167, 167, 167);
  overflow: hidden;
}
*{
  margin: 0;
  padding: 0;
}
</style>

最后效果：

在这里插入图片描述

作用域插槽

插槽分类:

默认插槽(组件内定制一处结构)
具名插槽(组件内定制多处结构)

作用域插槽: 是插槽的一个传参语法.

删除或查看都需要用到当前项的 id，属于组件内部的数据通过作用域插槽传值绑定，进而使用
在这里插入图片描述

在这里插入图片描述
1.渲染子组件，并且在子组件slot标签中添加:all="item" :msg="item.id"属性，用于作用域插槽传值。

<template>
  <table class="my-table">
    <thead>
      <tr>
        <th>序号</th>
        <th>姓名</th>
        <th>年纪</th>
        <th>操作</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(item,index) in data" :key="item.id">
        <td>{{index+1}}</td>
        <td>{{item.name}}</td>
        <td>{{item.age}}</td>
        <td>
           <!-- 为插槽提供返回数据,返回的数据将会被包装为一个对象，包含了slot标签上的属性 -->
          <slot :all="item" :msg="item.id">
            <button>删除</button>
          </slot>
        </td>
      </tr>
    
    </tbody>
  </table>
</template>

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

<style scoped>
.my-table {
  width: 450px;
  text-align: center;
  border: 1px solid #ccc;
  font-size: 24px;
  margin: 30px auto;
}
.my-table thead {
  background-color: #1f74ff;
  color: #fff;
}
.my-table thead th {
  font-weight: normal;
}
.my-table thead tr {
  line-height: 40px;
}
.my-table th,
.my-table td {
  border-bottom: 1px solid #ccc;
  border-right: 1px solid #ccc;
}
.my-table td:last-child {
  border-right: none;
}
.my-table tr:last-child td {
  border-bottom: none;
}
.my-table button {
  width: 65px;
  height: 35px;
  font-size: 18px;
  border: 1px solid #ccc;
  outline: none;
  border-radius: 3px;
  cursor: pointer;
  background-color: #ffffff;
  margin-left: 5px;
}
</style>

2.在template中,通过 #插槽名="obj” 接收，默认插槽名为 default

<!-- 结构 -->
<template>
  <div id="app">
   	<!--通过  #插槽名="obj” 接收，默认插槽名为default  -->
    <MyTable :data="list" #default="obj">
          <!-- 写删除方法 -->
      <button @click="deletelist(obj)">删除</button>
    </MyTable>
    <!--通过  #插槽名="obj” 接收，默认插槽名为default  -->
    <MyTable :data="list2" #default="obj">
          <!-- 写查看方法 -->
      <button  @click="chakanlist(obj)">查看</button>
    </MyTable>
  </div>
</template>

<!-- 行为 -->
<script>
// import MyBodys from './components/MyBodys.vue';
import MyTable from './components/MyTable.vue';

export default {
  name: "App",
  data() {
    return {
      list: [
        { id: 1, name: '张小花', age: 18 },
        { id: 2, name: '孙大明', age: 19 },
        { id: 3, name: '刘德忠', age: 17 },
      ],
      list2: [
        { id: 1, name: '赵小云', age: 18 },
        { id: 2, name: '刘蓓蓓', age: 19 },
        { id: 3, name: '姜肖泰', age: 17 },
      ]
    };
  },
  components:{
    MyTable
  },
  methods:{
    chakanlist(obj){
      console.log(obj.all)
      console.log(obj.msg)
      alert("姓名:"+obj.all.name+" 年龄:"+obj.all.age)
    },
    deletelist(obj){
      this.list = this.list.filter(item => item.id != obj.all.id)
    }
  }
};
</script>

<!-- 样式 -->
<style>
#app {
  width: 100%;
  height: 700px;
  background-color: rgb(255, 255, 255);
  overflow: hidden;
}
*{
  margin: 0;
  padding: 0;
}
</style>