Loading...
墨滴

明天以后

2021/12/14  阅读:69  主题:绿意

你不知道的Vue3插槽用法

你不知道的Vue3插槽用法

透传插槽内容

自定义组件时想把插槽内容直接传递给另一个组件时,避免列出原组件拥有的所有插槽。可以使用下面的方式, 例子,在使用van-search组件时ios上要加上form标签键盘才能出现搜索按钮,所以单独封装了一个组件(VSearch),但是van-search有很多插槽,不想挨个罗列。

<form action="/">
<van-search v-bind="$attrs"> <!--v-bind="$attrs" 传递所有props-->
  <template v-for="(item, key) in $slots" v-slot:[key]> <!--关键代码,v-slot:[key]为动态插槽名-->
    <slot :name="key"></slot>
  </template>
</van-search>
</form>

使用方式:

<v-search v-model="searchText" show-action placeholder="请输入关键词搜索" @search="onSearch">
  <template #action>
    <span @click="onSearch">搜索</span>
  </template>
</v-search>

这里action插槽的内容就直接传递过去了。当然不使用template模版,直接用render函数就更简单了,直接把slots内容放到h函数中就可以了。

自定义列表项内容

比如在使用van-steps组件时,想要封装一下统一控制van-step的左侧状态图标,避免在使用时给每一个step都设置图标让代码结构显得冗余,所以这里统一封装到一个组件里(VSteps),方便统一管理和维护。

<template>
  <van-steps class="process-record" direction="vertical" :active="active">
    <van-step v-for="(item, index) in data" :key="keyName ? item[keyName] : index"> 
      <template #active-icon>
        <div class="active-icon"></div>
      </template>
      <template #finish-icon>
        <div class="finish-icon"></div>
      </template>
      <template #inactive-icon>
        <div class="inactive-icon"></div>
      </template>
      <slot :item="item"></slot><!--关键代码-->
    </van-step>
  </van-steps>
<template>
<script lang="ts" setup>
defineProps({
  active: {
    type: [Number, String],
  },
  data: {
    type: Array,
  },
  keyName: {
    type: String,
  },
})
</script>

使用方式:

<VSteps :data="stepData" keyName="id" :active="0">
  <template #default="{item}"> <!--直接能获取到每一项的数据-->
    <div class="mb-15 text-gray-500">{{item.date}}</div>
  </template>
</VSteps>

这里就能直接获取到每一项的数据了,就方便根据具体的业务写展示的内容了。

明天以后

2021/12/14  阅读:69  主题:绿意

作者介绍

明天以后