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>
              </>
          )
        }
      }
相关推荐
策码1 分钟前
MutationObserver监听网页二次渲染和子节点变化
前端·javascript
前端大白话5 分钟前
React 必知!useLayoutEffect Hook 与 useEffect 的终极对决,DOM 操作和动画的秘密武器
前端·javascript·react.js
海底火旺5 分钟前
JavaScript 原型探秘:深入理解 .constructor 属性
前端·javascript·深度学习
前端大白话5 分钟前
Vue中provide/inject与Vuex数据共享大比拼:一文教你选对方案
前端·javascript·vue.js
海底火旺6 分钟前
"神奇!不用除法,如何算出数组中每个元素'邻居'的乘积?"
前端·javascript·面试
fury_1239 分钟前
删除elementplus的li标签中的一个class属性?
前端·javascript·vue.js
前端Hardy17 分钟前
第8课:JavaScript实战-简易计算器——入门阶段成果验收
前端·javascript
前端Hardy18 分钟前
第7课:JavaScript事件处理——JS的“感官系统”
前端·javascript
独立开阀者_FwtCoder21 分钟前
Trae + 设计 MCP :实现 UI 到网页自动化
前端·javascript·人工智能
拖孩27 分钟前
【Nova UI】十二、打造组件库之按钮组件(上):迈向功能构建的关键一步
前端·javascript·vue.js