v-solt 插槽

一、什么是插槽？

插槽就是子组件中，提供给父组件使用的一个占位符，用表示，父组件可以在这个占位符中填充任何模块代码，如HTML、组件等，填充的内容会替换子组件中的标签

• 子组件中设置了一个占位符
  

• 父组件中使用子组件内部去填充任何内容，都能将内容替换掉成子组件中的占位符
  加上v-slot:default表示为默认插槽
  

• 效果

  
  

二、具名插槽

1. 具名插槽其实就是给插槽取了个名字

2. 一个子组件可以放多个插槽，而且可以放不同的地方，而父组件填充内容的时候，可以根据这个名字把内容填充到对应的插槽中

• 子组件中设置两个slot占位符，并用name属性取上head和foot的插槽名字
  

• 父组件中是用template标签包裹两个标签，并用v-slot: 名字绑定两个插槽
  

• 效果

  
  

注意：在父组件中，无论绑定插槽的顺序如何，模块显示的顺序都是按照子组件中，插槽的顺序显示的

三、默认插槽

默认插槽就是指没有名字的插槽，子组件未定义的名字的插槽，父级将会把 未指定插槽的填充的内容填充到默认插槽中。

• 子组件中直接定义插槽，没有名字

  
  

• 父组件中v-slot:default表示默认插槽
  

• 效果

  
  

四、作用域插槽

1. 作用域插槽其实就是带数据的插槽，即带参数的插槽

2. 父组件可根据子组件传过来的插槽数据来进行不同的方式展现和填充插槽内容

• 在子组件Listitem.vue中去定义一个具名插槽，然后将需要传入的值绑定在一个属性上，这里是content
  

• 在父组件List.vue中去绑定具名插槽，并给这个插槽设置一个名字titleSlot，获取子组件传过来的参数时，用titleSlot.content获取当前传过来的内容
  

• 效果

  
  

五、在vue表格组件中中去获取当前行

业务场景

在vue项目中，使用elementui中的表格组件el-table和el-table-column去显示表格数据的时候，每一行都会有一个编辑和删除按钮，但是在点击按钮的时候如何确认点击的是否是当前需要删除或修改的行呢，这里也用到了v-solt，下面详细的举个例子

通过 Scoped slot 可以获取到 row, column, $index 和 store（table 内部的状态管理）的数据

1) 在el-table-column标签下去用templete标签，在templete标签中去绑定一个v-slot="scope"

2) 定义按钮，在按钮上设置单击事件，点击事件传参数scope.row

编辑
删除

3) 在点击事件的方法中去接收一个参数row，这个row就是当前行的信息

handleUpdate(row) {
  console.log("当前行row>>>", row);
},

• 打印结果

  
  

4) 完整代码

// 编辑一条数据的方法
handleUpdate(row) {
  console.log("当前行row>>>", row);
},
// 删除一条数据的方法
handleDelete(index, row) {
  // JSON.stringify() 将json对象转换成字符串
  console.log(`index : ${index}, row : ${JSON.stringify(row)}`);
  const uid = row.uid;
  console.log("uid>>", uid);
  // 提示框
  this.$confirm("是否删除这条记录？", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning" // 弹框类型为警告
  })
    .then(() => {
      RequestUserDelete(uid)
        .then(res => {
          if (res.resultCode === 1) {
            // 删除成功后，重新过请求一次列表数据
            this.onRequestUserList(this.currentNo, this.pageSize);
            this.$message({
              type: "success",
              message: "删除成功!"
            });
          }
        })
        .catch(err => {
          console.log(err);
        });
    })
    .catch(() => {
      this.$message({
        type: "info",
        message: "取消删除!"
      });
    });
},