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>
              </>
          )
        }
      }
相关推荐
SuperEugene7 分钟前
数组查找与判断:find / some / every / includes 的正确用法
前端·javascript
phltxy1 小时前
Vue进阶实战:自定义指令与插槽的核心用法及实战案例
前端·javascript·vue.js
Never_Satisfied1 小时前
在JavaScript / HTML中,触发某个对象的click事件
开发语言·javascript·html
许同1 小时前
JS-WPS 自动化办公(5)多Sheet整合
开发语言·前端·javascript
_OP_CHEN2 小时前
【前端开发之JavaScript】(四)JS基础语法下篇:函数与对象核心要点深度解析
开发语言·前端·javascript·界面开发·前端开发·网页开发·语法基础
强子感冒了2 小时前
JavaScript学习笔记:函数、方法与继承(原型与class)
javascript·笔记·学习
打瞌睡的朱尤10 小时前
Vue day10 完整购物网页(登录页,首页,搜索)
前端·javascript·vue.js
扶苏100211 小时前
深入理解 Vue 3 的 watchEffect
前端·javascript·vue.js
yanlele14 小时前
AI Coding 时代下, 关于你会写代码这件事儿, 还重要吗?
前端·javascript·ai编程
打瞌睡的朱尤14 小时前
Vue day9 购物车,项目,vant组件库,vw,路由
前端·javascript·vue.js