（十八）补充-Vue3中插槽的使用

Posted 2023-04-22

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了（十八）补充-Vue3中插槽的使用相关的知识，希望对你有一定的参考价值。

参考技术A vue3中的插槽是在用的时候和vue2的区别略有不同，常见插槽使用中主要体现在具名插槽上。
1、vue3中新增了v-slot来代替vue2中的slot等属性。
2、在普通插槽中使用：

结果会将el-table的内容渲染到组件模板中的el-main中。它还有另一种写法：

此种写法就是vue3中新增的插槽指令，它还有另一种写法：

此种写法类似于v-on简写于@，v-bind简写于：,v-slot也有简写：#。
3、在具名插槽中使用，
可以通过给v-slot指令增减一个参数名称来指定具体的某一个插槽（具有name属性的插槽）

在此组件中就包含了已给匿名插槽以及，name分别为"top-left","top-right","bottom"的三个具名插槽。

那么我们在使用的时候直接使用插槽的简写来对指定的插槽指定要渲染的内容。

下一章：（十九）setup 语法糖应用
上一章：（十七）Vue3.x使用provide/inject来代替vuex的实现方式

ps：未经他人事，勿劝他人善！

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>