快捷導(dǎo)航

Vue模擬el-table演示插槽用法的示例詳解

更新時(shí)間：2023年05月30日 11:28:00 作者：Java大師-

很多人知道插槽分為三種，但是實(shí)際到elementui當(dāng)中為什么這么用，就一臉懵逼，接下來(lái)就跟大家聊一聊插槽在elementui中的應(yīng)用，并且自己寫(xiě)一個(gè)類似el-table的組件，感興趣的可以了解一下

1、匿名插槽

匿名組件相當(dāng)于一個(gè)占位符，將父組件的數(shù)據(jù)傳入子組件的slot標(biāo)簽內(nèi)

父組件：

<template>
  <ChildSlot>父組件調(diào)用</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>

運(yùn)行結(jié)果如下：

此時(shí)父組件中的“父組件調(diào)用”這段內(nèi)容就傳遞到了子組件，并填入了slot挖的坑當(dāng)中

2、具名插槽

具名插槽相當(dāng)于給插槽添加了一個(gè)名字（給插槽加入name屬性就是具名插槽）

父組件：

<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>

運(yùn)行結(jié)果如下：

此時(shí)父組件中的根據(jù)slot的name，將內(nèi)容填入了slot挖的坑當(dāng)中，一個(gè)蘿卜一個(gè)坑

3、作用域插槽

與前兩者的不同 slot自定義:name="值" 子組件可向父組件傳遞信息

父組件：

<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>

運(yùn)行結(jié)果如下：

通過(guò)作用域插槽，我們可以將子組件中的值傳入到父組件，在父組件進(jìn)行數(shù)據(jù)處理后，填坑到子組件

4、模擬寫(xiě)一個(gè)el-table

先看一個(gè)el-table的例子，當(dāng)需要對(duì)一行中的某一個(gè)單元格的內(nèi)容進(jìn)行處理的時(shí)候，需要用到slot插槽，例如下面的姓名name的處理

<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>

參照el-table，實(shí)現(xiàn)我們自己的table組件，講解下為什么需要用插槽，用了哪些插槽

4.1為了傳遞table，首先通過(guò)匿名插槽，寫(xiě)一個(gè)的組件，目的就是模擬下面這三行內(nèi)容

? <el-table
? :data="tableData"
? style="width: 100%">

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

4.2實(shí)現(xiàn)el-table-column，通過(guò)作用域插槽，寫(xiě)我們自己的el-table-column

<template>
  <div>
    <div>
      <!--通過(guò)傳遞label標(biāo)簽，展示表頭-->
      <span v-if="label">{{ label }}</span>
    </div>
    <!--獲取主頁(yè)面的data值：$parent.$parent.$data.tableList-->
    <div v-for="(user,index) in $parent.$parent.$data.tableList" :key="index">
      <!--當(dāng)傳遞prop屬性的時(shí)候，就取user用戶的數(shù)據(jù)-->
      <div v-if="prop">{{user[prop]}}</div>
      <!--當(dāng)不傳遞prop屬性的時(shí)候，將用戶的數(shù)據(jù)通過(guò)row屬性，傳遞到父組件當(dāng)中，也就是app.vue-->
      <slot v-else :row="user"></slot>
    </div>
  </div>
</template>
<script>
export default {
  name: "MyTableColumn",
  props: {
    prop: {type: String},
    label: {type: String}
  }
}
</script>

4.3調(diào)用my-table，my-table-column

我們通過(guò)my-table標(biāo)簽，將內(nèi)容my-table和my-table-column放置到my-table的匿名插槽中，并通過(guò)子組件的props屬性，接收prop和label。如同elementui一樣，如果prop為空，子附件將父組件的user通過(guò)作用域插槽傳遞到父組件，并在父組件進(jìn)行處理

<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>

展示結(jié)果如下：