VUE中插槽slot用法及使用场景（结合element table封装介绍）

slot：为了解决引入子组件标签内不能直接写入内容 相当于是个占位符 让你能够直接写入内容

分为3种 

匿名插槽：

具名插槽：指定插槽 显示内容

作用域插槽：数据绑定，组件间通讯

下面结合element表格封装进行详解

先封装一个表格

<template>
  <div>
    <el-table :data="data.tableList" style="width: 100%">
      <el-table-column type="selection" width="55"></el-table-column>
      <template v-for="item in data.tableHeader"> 
        <el-table-column :key="item.name" :prop="item.prop" :label="item.label" :min-width="item.width" v-if="item.type==='slot'">
            <!-- 匿名插槽 -->
            <!-- <template>
              <slot></slot>
            </template> -->

            <!-- 具名插槽 -->
            <!-- <template>
              <slot :name="item.slotName"></slot>
            </template> -->

            <!-- 作用域 -->
            <template slot-scope="{ row }">
              <slot :name="item.slotName" :data="row"></slot>
            </template>
        </el-table-column>
        <el-table-column :key="item.name" :prop="item.prop" :label="item.label" :min-width="item.width" v-else></el-table-column>
      </template>
    </el-table>
  </div>
</template>
<script>
export default {
    props:['data'],
    data() {
        return {};
    },
    mounted(){
       
    }
};
</script>
<style lang="scss" scope>
</style>

页面使用 

<template>
  <div>
    <TableView :data="tableData">
        <!-- 匿名插槽 -->
        <!-- <template>
            匿名插槽 
        </template> -->

        <!-- 具名插槽 -->
        <!--  # == v-slot: -->
        <!-- <template #name>
            具名插槽 
        </template>
        <template #sex>
            测试
        </template> -->

        <!-- 作用域插槽 -->
        
        <template #name='{data}'>
            作用域插槽 {
   
   {data.name}}
        </template>
        <template #operation='{data}'>
            <el-button type="danger" @click='deleteInfor(data.name)'>删除</el-button>
            <el-button type="success">编辑</el-button>
        </template>
    </TableView>
  </div>
</template>
<script>
import TableView from "@/components/table";
export default {
  components: { TableView },
  data() {
    return {
      tableData: {
        select: true,
        tableHeader: [
          {
            label: "姓名",
            prop: "name",
            type: "slot",
            width: 120,
            // slotName:'name' 具名插槽
            slotName:'name'
          },
          {
            label: "性别",
            prop: "sex",
            width: 120,
            // type: "slot",
            //slotName:'sex' 具名插槽
          },
          {
            label: "年龄",
            prop: "age",
            width: 120,
          },
          {
            label: "工作",
            prop: "job",
          },
          {
            label: "操作",
            width:150,
            type: "slot",
            slotName:'operation'
          },
        ],
        tableList: [
          {
            name: "张三",
            sex: "男",
            age: 28,
            job: "销售",
          },
          {
            name: "李四",
            sex: "女",
            age: 18,
            job: "IT",
          },
        ],
      },
    };
  },
  methods:{
      deleteInfor(row){
          console.log(row)
      }
  }
};
</script>

建议刚刚接触的新手 一定要去动手去做 自己从头到尾去敲一遍  这样才能真正理解和吸收