vue中插槽，具名插槽及其缩写的使用

Posted 2021-09-04 铁锤妹妹@

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue中插槽，具名插槽及其缩写的使用相关的知识，希望对你有一定的参考价值。

什么是插槽`< slot />`？

插槽是给组件预留的空间，当封装组件时往往会给组件使用插槽，插槽如何使用由父组件决定，插槽中的内容如果没有在该组件中插入其他任何内容，就默认显示插槽中的内容。
简单的来说就是将写在父组件里的内容插入到子组件里

需求: 在子组件中显示 ‘学习插槽’ 几个字

首先在父组件中引入Dialog子组件，并在中间写入内容

//这是父组件里的代码，引入子组件Dialog
<Dialog>
  <P>学习插槽</P>
</Dialog>

在子组件里确定在哪里使用显示

<template>
    <P>下面是插槽位置</P>
         //slot就是插入的地方
    <solt/>
</template>

这样的插槽很简单，但是只能插入一个地方，我要是想在不同的地方插入不同的内容，这就该使用具名插槽

什么是具名插槽？

具名插槽则是当子组件需要显示不同的效果时使用具名插槽，通过name属性给插槽命名，父组件向子组件具名插槽提供内容的时候中用v-slot:name的插槽名的形式提供内容。
简单点就是具名插槽就是带有名字的插槽，一个名字一个坑

table表格子组件：

  <template v-for="item in columns">
        <el-table-column
          v-if="item.slot"
          :min-width="item.width"
          :prop="item.prop"
          :label="item.label"
          :key="item.prop + 'slot'"
          :fixed="item.fixed"
        >
          <!-- 表格内容插槽自定义 -->
          <template #default="scope">
            <slot :row="scope.row" :name="item.slot" />
          </template>
        </el-table-column>
</template>

父组件

在向具名插槽提供内容的时候，我们可以在一个 <template> 元素上使用 v-slot指令，并以 v-slot 的参数的形式提供其名称，这个名称需要和子组件具名插槽name的名字保持一致
下面的#trading="scope"其实是v-slot的缩写

<mytable
      :columns="columns"
      :renderData="renderData"
      :loading="loading"
      :total="total"
      @handlePageChange="handlePageChange"
    >
      <template #trading="scope">
        {{ formatDateTen(scope.row.trading_time) }}
      </template>
      <template #add="scope">
        {{ formatDateTen(scope.row.add_time) }}
      </template>
      <template #update="scope">
        {{ formatDateTen(scope.row.update_time) }}
      </template>
    </mytable>
    <script>
import mytable from '@/components/table/index.vue'
export default {
  components: {
    mytable
  },
  data () {
    return {
      columns: [
        {
          prop: 'salesman_name',
          label: '业务名字',
          type: 'normal',
          width: '100px'
        },
        {
          prop: 'add_time',
          label: '添加时间',
          type: 'normal',
          slot: 'add',
          width: '120px'
        },
        {
          prop: 'trading_time',
          label: '交易时间',
          type: 'normal',
          slot: 'trading',
          width: '120px'
        },
        {
          prop: 'update_time',
          label: '更新时间',
          type: 'normal',
          slot: 'update',
          width: '120px'
        }
      ],
  
}
</script>