Vue模拟el-table演示插槽用法的示例详解

<template>
  <ChildSlot>父组件调用</ChildSlot>
</template>
<script>
import ChildSlot from "@/components/ChildSlot";
export default {
  components:{
    ChildSlot
  }
}
</script>

<template>
  <h1>我是子组件</h1>
  <slot></slot>
</template>
<script>
export default {
  name: "ChildSlot"
}
</script>

<template>
    <child-slot>
      <template v-slot:username>我是父组件传递的用户姓名</template>
    </child-slot>
    <child-slot>
      <template v-slot:age>我是父组件传递的年龄</template>
    </child-slot>
</template>
<script>
import ChildSlot from "@/components/ChildSlot";
export default {
  components:{
    ChildSlot
  }
}
</script>

<template>
  <h1>我是子组件</h1>
  <slot name="username"></slot>
  <slot name="age"></slot>
</template>
<script>
export default {
  name: "ChildSlot"
}
</script>

<template>
    <child-slot>
      <template v-slot="{username}">我是子组件传递的用户姓名：{{username}}</template>
    </child-slot>
</template>
<script>
import ChildSlot from "@/components/ChildSlot";
export default {
  components:{
    ChildSlot
  }
}
</script>

<template>
  <h1>我是子组件</h1>
  <slot :username="username"></slot>
</template>
<script>
export default {
  name: "ChildSlot",
  data(){
    return{
        username:'java',
    }
  }
}
</script>

<template>
  <el-table
      :data="tableData"
      style="width: 100%">
    <el-table-column
        label="姓名"
        width="180">
        <template slot-scope="scope">
          <el-popover trigger="hover" placement="top">
            <p>姓名: {{ scope.row.name }}</p>
            <p>住址: {{ scope.row.address }}</p>
            <div slot="reference" class="name-wrapper">
              <el-tag size="medium">{{ scope.row.name }}</el-tag>
            </div>
          </el-popover>
        </template>
    </el-table-column>
    <el-table-column
        prop="address"
        label="地址">
    </el-table-column>
  </el-table>
</template>

<template>
  <div>
      <slot></slot>
  </div>
</template>
<script>
export default {
  name: "MyTable"
}
</script>

<template>
  <div>
    <div>
      <!--通过传递label标签，展示表头-->
      <span v-if="label">{{ label }}</span>
    </div>
    <!--获取主页面的data值：$parent.$parent.$data.tableList-->
    <div v-for="(user,index) in $parent.$parent.$data.tableList" :key="index">
      <!--当传递prop属性的时候，就取user用户的数据-->
      <div v-if="prop">{{user[prop]}}</div>
      <!--当不传递prop属性的时候，将用户的数据通过row属性，传递到父组件当中，也就是app.vue-->
      <slot v-else :row="user"></slot>
    </div>
  </div>
</template>
<script>
export default {
  name: "MyTableColumn",
  props: {
    prop: {type: String},
    label: {type: String}
  }
}
</script>

<template>
  <div>
    <my-table :data="tableList" style="display: flex; flex-direction: row;">
      <my-table-column prop="name" label="姓名"></my-table-column>
      <my-table-column prop="sex" label="性别"></my-table-column>
      <my-table-column label="地址">
        <template v-slot="scope">
          <span style="background-color: deepskyblue">{{scope.row.address}}</span>
        </template>
      </my-table-column>
    </my-table>
  </div>
</template>
<script>
import MyTable from "@/components/MyTable";
import MyTableColumn from "@/components/MyTableColumn";
export default {
  name: 'App',
  components:{
    MyTableColumn,
    MyTable
  },
  data(){
    return{
      tableList:[
        {
          name: 'java大师1',
          sex: '男',
          address: '西藏1'
        },
        {
          name: 'java大师2',
          sex: '男',
          address: '西藏2'
        },
        {
          name: 'java大师3',
          sex: '男',
          address: '西藏3'
        },
        {
          name: 'java大师4',
          sex: '男',
          address: '西藏4'
        }
      ]
    }
  }
}
</script>