【vue3.2 + ts + vite】使用 slot

最新推荐文章于 2023-09-09 16:44:23 发布

卿卿qing

最新推荐文章于 2023-09-09 16:44:23 发布

阅读量142

点赞数

文章标签： vue.js

本文链接：https://blog.csdn.net/weixin_43900414/article/details/130524620

版权

vue3中使用slot会报错，需要用template封装一下。

1，基本使用方法

<slot name="button"> </slot>

<template #button>
  <div>查看详情</div>
</template>

2，有参数传递，接收值使用方法

<div v-for="item in list" :key="item.id">
  <slot
    name="card"
    :item="item"
  ></slot>
</div>

<template #card="{ item }">
  <list-card
    :info="item"
    :config="config"
  >
    <template #button>
      <div>查看详情</div>
    </template>
  </list-card>
</template>