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>
              </>
          )
        }
      }
相关推荐
014-code7 小时前
Vue 生命周期完全指南
前端·javascript·vue.js
冴羽yayujs7 小时前
资深前端都在用的 9 个调试偏方
前端·javascript·调试
lichenyang4537 小时前
组件设计模式与通信
前端·javascript·设计模式
lxh01138 小时前
计算右侧小于当前元素的个数 题解
javascript·数据结构·算法
天天向上10248 小时前
vue 大屏适配的一种实现思路
前端·javascript·vue.js
SuperEugene8 小时前
Vue/Vite 多环境配置实战:dev、test、prod 差异区分与避坑指南|Vue 工程化篇
前端·javascript·vue.js
结网的兔子8 小时前
前端学习笔记(实战准备篇)——用vite构建一个项目【吐血整理】
前端·学习·elementui·npm·node.js·vue
lichenyang4538 小时前
React 性能优化组件设计模式与通信
前端·javascript·设计模式
SuperEugene8 小时前
Vite 实战教程:alias/env/proxy 配置 + 打包优化避坑|Vue 工程化篇
前端·javascript·vue.js·状态模式·vite
xixixin_9 小时前
【CSS】Ant Design 按钮点击时文字位移问题
前端·javascript·html