封装a-drawer组件 使用slot的问题

• Z时代
• 2024-03-11
• 分类：IT

这是组件

<template>
  <a-drawer
    :title="drawerInfo.customTitle"
    :closable="drawerInfo.showCloseIcon"
    :visible="drawerInfo.visible"
    :width="drawerInfo.width"
    :mask-closable="drawerInfo.clickmaskFlag"
    @close="onClose"
  >
    <template #content>
      <slot name="content" />
    </template>
  </a-drawer>
</template>

        <Drawer
          openlocal="right"
          :show-closeflag="comInfo.showCloseflag"
          custom-title="创建 Bucket"
          :show-msk-flag="comInfo.showMskFlag"
          @otherHander="otherHander"
        >
          <template #content>
            <div>
              123
            </div>
          </template>
        </Drawer>

当我使用的时候 div里面的 123 没有展示出来，请问是哪里出了问题？？ (vue3.2)

回答：

codesandbox
插槽只需要定义名称即可,
<slot name="header"></slot>
不需要在外面包一层

<template #content>
      <slot name="content" />
    </template>

<template>
  <a-drawer>
     <slot name="content" />
  </a-drawer>
</template>

使用的时候 写插槽名称

<Drawer>
  <template #content>
    <div>
      123
    </div>
  </template>
</Drawer>

以上是 封装a-drawer组件 使用slot的问题 的全部内容， 来源链接： utcz.com/p/937071.html