代码改变世界

通过UI库深入了解Vue的插槽的使用技巧

2022-01-17 18:10  金色海洋（jyk）  阅读(1136)  评论(2)  编辑  收藏  举报

Vue官网对于插槽的介绍比较简略，插槽本身也比较“烧脑”，很容易看晕，我就一直没看懂，直到 使用了element-plus的组件的插槽。
其实我们可以换一个角度来理解插槽，就会豁然开朗了。

技术栈

  • vite
  • vue3
  • element-plus

从父子组件的传值开始

父子组件传值可以通过 prosp + emit 来实现，虽然 props 可以传递各种类型，但是却不能传递组件（包括HTML），这样灵活度就差了一些。
那么怎么办呢？为了提高灵活性，Vue 提供了插槽功能。

插槽可以分为：插槽、具名插槽、作用域插槽
如果不明所以的话，可以换一种名称：匿名插槽、命名插槽、可传参插槽。

匿名插槽

如何理解插槽呢？可以先看看div，div是一个容器，里面可以放各种HTML标签，同时也可以放各种组件。

那么我们可以把div内部的标签、组件视为插槽内容，同理，我们也可以把 select 内部的 option 也视为插槽内容。

我们可以用匿名插槽的方式，写一个my-div的组件。

  • 子组件 ./comp/my-div.vue
  <div style="margin: 10px;padding: 10px; border:1px solid orange;">
    匿名插槽：
    插槽前<br><br>
    <slot>没有设置插槽</slot>
    <br><br>
    插槽后
  </div>

子组件设置一个 slot 标签，slot 可以理解为是一种“插值”，表示父组件的插槽在这个位置被渲染，然后在其前后可以加入子组件自己的内容。

slot 里面是“备用内容”，如果父组件没有设置插槽的话，“备用内容”会被渲染，否则会被忽略。

  • 父组件

我们看一看在父组件里面的使用情况：

  import myDiv from './comp/my-div.vue'

  匿名插槽<br>
  设置文本框作为插槽内容：
  <my-div>
    <input type="text" placeholder="父组件的插槽">
  </my-div>
  <br>
  没有设置插槽内容：
  <br>
  <my-div></my-div>
  • 看看效果

匿名插槽

这样就实现了一个简单的具有插槽功能的组件，当然这个组件是为了插槽而插槽，并没有没有实际意义。

那么插槽在实际项目里可以有哪些作用呢？我们可以参考一下UI库的组件，他们有很多插槽的实际应用，比如 el-input、el-table等。

具名插槽。

“具名”是个啥意思？感觉用“命名插槽”更好理解一些。

  • 如果一个组件只有一个插槽，那么不用写名称，Vue会使用默认名称：default 。
  • 如果一个组件有多个插槽的话，那么就需要起名来区分不同的插槽。

el-input 提供了prefix、suffix、prepend、append四个插槽，就是采用了命名插槽的方式。

我们来看一下官网的例子：

    <el-input v-model="input1" placeholder="Please input">
      <template #prepend>Http://</template>
    </el-input>
    <el-input v-model="input2" placeholder="Please input">
      <template #append>.com</template>
    </el-input>
  • # 是 v-lot: 的简写形式，类似于 “v-bind:” 简写为 “:”，“v-on:” 简写为 “@”
  • prepend 在文本框的前面放置一个插槽，比如 http://
  • append 在文本框的后面方式一个插槽，比如 .com

这样可以方便输入URL地址。其实如果 append 放置一个 el-autocomplete 的话，可以更灵活的设置域名后缀。

手写一个命名插槽

还是手写一个命名插槽，看一下子组件的实现方式。

  • 子组件 ./comp/my-div-name.vue
  <div style="margin: 10px;padding: 10px; border:1px solid rgba(61, 67, 155, 0.692);">
    <slot name="header">我来组成头部</slot>
    插槽中间内容
    <slot name="footer">我来组成结尾</slot>
  </div>

实现具名插槽的方式很简单，用 name 属性设置插槽的名称即可。

  • 父组件的调用
  import myDivName from './comp/my-div-name.vue'

  <my-div-name>
    <template v-slot:header>
      <h1>这是头部</h1>
    </template>
    <template #footer>
      <p>这是结尾</p>
    </template>
  </my-div-name>

父组件需要用 template 限定具名插槽内容的范围，我们来看看效果：

具名插槽

作用域插槽

插槽是父组件的，不是子组件的，父组件可以完全操作插槽里的组件。
但是子组件只能规定插槽的渲染位置，其他的就不能操作了，这样的话还是有些不够灵活，于是出现了作用域插槽。

作用域插槽的目的是解决父组件、子组件、插槽之间的数据通讯的问题。

还是看看UI库组件 el-table 的插槽 。

父组件设置列表数据，传递给子组件，子组件渲染 table 表格。
为了更灵活，组件提供了自定义列的功能，采用的就是作用域的插槽。

看一下官网示例：

<el-table :data="tableData" style="width: 100%">
    <el-table-column label="Date" width="180">
      <template #default="scope">
        <span style="margin-left: 10px">{{ scope.row.date }}</span>
      </template>
    </el-table-column>
</table>
  • scope 就是子组件传递出来的数据集合，包含row、column、$index等属性。
  const tableData = reactive([
        {
          date: '2016-05-03',
          name: 'Tom',
          address: 'No. 189, Grove St, Los Angeles',
        },
        {
          date: '2016-05-02',
          name: 'Tom',
          address: 'No. 189, Grove St, Los Angeles',
        },
        {
          date: '2016-05-04',
          name: 'Tom',
          address: 'No. 189, Grove St, Los Angeles',
        },
        {
          date: '2016-05-01',
          name: 'Tom',
          address: 'No. 189, Grove St, Los Angeles',
        }
  ])
  • tableData：父组件定义数据列表，通过 data 属性传递给子组件。

这里的 scope 的数据流程是这样的：父组件 =》子组件 =》插槽。

为啥要绕一圈呢？虽然父组件可以直接给插槽设置值，但是由于 tr 是循环出来的，父组件无法获知循环到哪一行了，所以需要子组件告知循环行数，这个信息就是通过作用域插槽来实现的，我们可以做一个简单的示例。

手撸一个简单的作用域插槽

  • 子组件 ./comp/my-table.vue
  <div>
    <table>
      <tr>
        <th>标题一</th>
        <th>标题二</th>
        <th>自定义</th>
      </tr>
      <tr v-for="(item, index) in data"
        :key="index"
      >
        <td>{{item.t1}}</td>
        <td>{{item.t2}}</td>
        <td>
          <slot name="td"
            :row="item"
            :$index="index"
          ></slot>
        </td>
      </tr>
    </table>
  </div>

第三列设置一个具名插槽，通过row、$index 传递数据。

  const props = defineProps({
    data: Array
  })

设置一个属性，接收列表数据。

  • 父组件调用
  import myTable from './comp/my-table.vue'

  const data = reactive([
    { t1: '11', t2: '12', t3: '13' },
    { t1: '21', t2: '22', t3: '23' },
    { t1: '31', t2: '32', t3: '33' }
  ])

  <my-table :data="data">
    <template #td="scope">
      自定义列:{{scope}}
    </template>
  </my-table>

可以看到数据的传递。

子组件的插槽，先起个名字，就叫做“td”好了，不要纠结名称，俺有起名困难症。

然后用 row 属性传递行的数据，用 $index 传递遍历到第几行的数据。

这样一个简单的作用域插槽就搞定了。当然只是一个示例，还是没有啥实际意义。

那么有实际意义的是什么样子的呢？还记得标题吗？我可不是标题党，彩蛋马上就来。

片尾彩蛋

现在流行用 json 来渲染组件，还是用 el-table 举例，我们可以定义一个 json，来描述表格列的情况，比如：

{
  "itemMeta": [
    {
      "prop": "name",
      "label": "姓名",
      "width": 140,
      "align": "center",
      "header-align": "center"
    },
    {
      "prop": "age",
      "label": "年龄",
      "width": 140,
      "align": "center",
      "header-align": "center"
    },
    {
      "prop": "mobile",
      "label": "电话",
      "width": 140,
      "align": "center",
      "header-align": "center"
    },
    {
      "prop": "url",
      "label": "URL",
      "width": 140,
      "align": "center",
      "header-align": "center"
    }
  ]
}

然后遍历 el-table-colmun 设置属性，这样就可以实现动态渲染 table 的功能。
这样虽然很方便，但是自定义列呢？如果不支持插槽的话，那么灵活性就差了一些。

鱼和熊掌能不能兼得呢？既然都写到这里了，那么肯定可以兼得。

做一个默认规则

自定义列的插槽名称格式：td_{字段名称}。
也就是说 td_开头的视为自定义列的插槽，加上前缀可以避免和 el-table 自带的具名插槽冲突。

然后封装一下 el-table

建立一个组件 ./comp/my-table-json.vue

  import { useSlots } from 'vue'
  
  const props = defineProps({
    colInfo: Object,
    data: Array
  })
 
  // 获取插槽信息
  const slots = useSlots()
  // 获取列的描述信息
  const colInfo = props.colInfo

  // 检查插槽，设置名称
  colInfo.forEach(col => {
    const _slotName = 'td_' + col.prop
    if (typeof slots[_slotName] === 'function') {
      // 有插槽
      col.slotName = _slotName
    } else {
      // 没有插槽
      col.slotName = ''
    }
  })

定义属性，接收数据和列的描述。
然后获取插槽的信息，设置列是否需要加载插槽。

  <el-table :data="data" style="width: 100%">
    <template
      v-for="(item, index) in colInfo"
      :key="index"
    >
      <!--不带插槽的列-->
      <el-table-column
        v-if="item.slotName == ''"
        v-bind="item"
      >
      </el-table-column>
      <!--带插槽的列-->
      <el-table-column
        v-else
        v-bind="item"
      >
        <template #default="scope">
          <slot :name="item.slotName" v-bind="scope"></slot>
        </template>
      </el-table-column>
    </template>
  </el-table>

遍历列的描述信息，判断是否需要加载插槽，如果需要插槽的话，设置插槽并且传递 scope 数据。

父组件的调用

父组件就简单多了。

  UI库的 table 的二次封装
  不用自定义列：
  <my-table-json :data="data" :colInfo="colInfo">
  </my-table-json>

  使用自定义列：
  <my-table-json :data="data" :colInfo="colInfo">
    <template #td_url="{ row }">
      <a :href="row.url" target="blank">{{row.name}}</a>
    </template>
    <template #td_mobile="scope">
      手机:{{scope.row.mobile}}
    </template>
  </my-table-json>

不需要自定义列的话，代码可以更简洁；
需要自定义列的话，也支持用插槽的方式实现。

  import myTableJson from './comp/my-table-json.vue'
  import meta from './grid.json'

  const colInfo = reactive(meta.itemMeta)

  const data = reactive([
    {
      name: '阿蒙',
      age: 18,
      mobile: '1399999991',
      url: 'https://naturefw.gitee.io/nf-rollup-ui-controller'
    },
    {
      name: '小李',
      age: 18,
      mobile: '1399999992',
      url: 'https://naturefw.gitee.io/nf-rollup-ui-controller/meta-base'
    },
    {
      name: '路飞',
      age: 18,
      mobile: '1399999993',
      url: 'https://naturefw.gitee.io/nf-rollup-ui-controller/meta-base'
    }
  ])

这样就不用手撸 el-table-column 了，交给子组件即可，同时还可以满足自定义列的需求。

是不是即简洁又灵活。这个彩蛋还满意吧。

看看效果：

json渲染 + 作用域插槽

在线演示

https://naturefw.gitee.io/nf-rollup-ui-controller/test-slot

源码

https://gitee.com/naturefw/nf-rollup-ui-controller/tree/master/src/views/test/slot

2