jsx中使用插槽

1. jsx语法中使用插槽

以elementplus ElPopconfirm 为例

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

使用

javascript 复制代码
      slots: {
        default: (data: any) => {
          const slot = {
            reference: () => (
                <div>{1111}</div>
            )
          }
          return (
              <>
                <ElPopconfirm title="Are you sure to delete this?" v-slots={slot}></ElPopconfirm>
              </>
          )
        }
      }
相关推荐
知识分享小能手9 分钟前
uni-app 入门学习教程,从入门到精通,uni-app 基础知识详解 (2)
前端·javascript·windows·学习·微信小程序·小程序·uni-app
晴殇i2 小时前
前端鉴权新时代:告别 localStorage,拥抱更安全的 JWT 存储方案
前端·javascript·面试
码农刚子2 小时前
ASP.NET Core Blazor简介和快速入门 二(组件基础)
javascript·后端
我是日安2 小时前
从零到一打造 Vue3 响应式系统 Day 27 - toRef、toRefs、ProxyRef、unref
前端·javascript·vue.js
不如喫茶去3 小时前
VUE查询-历史记录功能
前端·javascript·vue.js
一枚前端小能手3 小时前
「周更第8期」实用JS库推荐:decimal.j
前端·javascript
Tech_Lin3 小时前
JavaScript Date时间对象的常用操作方法总结
前端·javascript
一枚前端小能手3 小时前
🚫 请求取消还在用flag?AbortController让你的异步操作更优雅
前端·javascript
JohnYan3 小时前
工作笔记 - VSCode ssh远程开发
javascript·ssh·visual studio code
shayudiandian4 小时前
JavaScript性能优化实战
开发语言·javascript·性能优化