代码改变世界

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

2022-01-17 18:10  金色海洋(jyk)  阅读(405)  评论(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