jsx中使用插槽

最新推荐文章于 2024-05-06 17:05:26 发布

原创最新推荐文章于 2024-05-06 17:05:26 发布 · 1.8k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue

vue3 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了如何在ElementPlus的ElPopconfirm组件中使用jsx语法的插槽功能，通过`default`插槽和`reference`属性，实现在确认对话框中动态显示内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. jsx语法中使用插槽

以elementplus ElPopconfirm 为例

<el-popconfirm title="Are you sure to delete this?">
    <template #reference>
      <el-button>Delete</el-button>
    </template>
  </el-popconfirm>

使用

      slots: {
        default: (data: any) => {
          const slot = {
            reference: () => (
                <div>{1111}</div>
            )
          }
          return (
              <>
                <ElPopconfirm title="Are you sure to delete this?" v-slots={slot}></ElPopconfirm>
              </>
          )
        }
      }