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>
              </>
          )
        }
      }
相关推荐
六月June June18 小时前
leaflet L.popup().setContent中挂载vue组件
前端·javascript·vue.js
软件开发技术深度爱好者18 小时前
JavaScript的p5.js库使用详解(上)
开发语言·javascript
首席拯救HMI官18 小时前
【拯救HMI】HMI容错设计:如何减少操作失误并快速纠错?
大数据·运维·前端·javascript·网络·学习
深蓝电商API18 小时前
Scrapy与Splash结合爬取JavaScript渲染页面
javascript·爬虫·python·scrapy
donecoding19 小时前
AI时代程序员的护城河:让AI做创意组合,用标准化工具守住质量底线
javascript·架构·代码规范
明月_清风19 小时前
Async/Await:让异步像同步一样简单
前端·javascript
倔强的钧仔19 小时前
拒绝废话!前端开发中最常用的 10 个 ES6 特性(附极简代码)
前端·javascript·面试
喔烨鸭19 小时前
vue3中使用原生表格展示数据
前端·javascript·vue.js
软件开发技术深度爱好者19 小时前
JavaScript的p5.js库坐标系图解
开发语言·前端·javascript
如果你好19 小时前
JavaScript 对象属性遍历Object.entries Object.keys:6 种常用方法详解与对比
javascript