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>
              </>
          )
        }
      }
相关推荐
默_笙8 小时前
⛵ 我用 React + TS 做了个"调色盘",顺便学会了企业级项目的目录架构
前端·javascript
渣波8 小时前
拒绝 Redux 样板代码:Zustand 核心原理与实战进阶指南(基础、异步与切片模式)
前端·javascript
C++、Java和Python的菜鸟8 小时前
第12章 前端Web进阶(Vue工程化+ElementPlus)
前端·javascript·vue.js
妙码生花9 小时前
让各大 AI 整理出来的前端工程命名最简实践(Vue + TS)
前端·javascript·vue.js
郭wes代码10 小时前
纯 CSS+JS 实战:手搓一张支持自定义的通用金色电子奖状(万字详细拆解)
前端·javascript·css
用户8471810541911 小时前
DeepAgents.js 教程 06—— 跨会话长期记忆(Memory与AGENTS.md)
javascript·agent
Tian_Hang11 小时前
Vue3 父子组件通讯
前端·javascript·vue.js
breeze jiang11 小时前
React memo、useCallback 与 useMemo:父组件多状态时如何减少无效渲染
前端·javascript·react.js
代码不加糖13 小时前
common.js和es6中模块引l入的区别?
前端·javascript·es6
云浪14 小时前
从 0 到实战:掌握向量数据库 Milvus,构建 AI 应用的核心能力
javascript·数据库·人工智能