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>
              </>
          )
        }
      }
相关推荐
Lee川8 小时前
🚀《JavaScript 灵魂深处:从 V8 引擎的“双轨并行”看执行上下文的演进之路》
javascript·面试
比特鹰9 小时前
手把手带你用Flutter手搓人生K线
前端·javascript·flutter
大雨还洅下9 小时前
前端JS: 数组扁平化
javascript
奔跑路上的Me9 小时前
前端导出 Word/Excel/PDF 文件
前端·javascript
bluceli9 小时前
JavaScript异步编程深度解析:从回调到Async Await的演进之路
前端·javascript
SuperEugene9 小时前
路由与布局骨架篇:布局系统 | 头部、侧边栏、内容区、面包屑的拆分与复用
前端·javascript·vue.js
代码煮茶9 小时前
前端网络请求实战 | Axios 从入门到封装(拦截器 / 错误处理 / 重试)
javascript
进击的尘埃9 小时前
组合式函数 Composables 的设计模式:如何写出可复用的 Vue3 Hooks
javascript
进击的尘埃9 小时前
浏览器渲染管线深度拆解:从 Parse HTML 到 Composite Layers 的每一帧发生了什么
javascript
大雨还洅下9 小时前
前端手写: Promise封装Ajax
javascript