企业网站建设服务好沈阳建站模板系统

1、使用render函数和h函数

h函数创建虚拟节点（VNode），render函数实现虚拟节点生成真实DOM元素
实现添加一个el-button按钮

<script setup lang="ts">
import { ElButton } from "element-plus"; //需要在页面中引入，不然使用报警告const renderButton = {render: () => {return h(ElButton,{type: "primary",onClick: () => {console.log("点击了按钮");},},"按钮");},
};
</script>

使用：

<renderButton />

效果：

2、使用tsx：< script setup lang=“tsx”>

tsx：在 TS 文件中使用 JSX 语法
JSX：在 JavaScript 代码中编写类似 HTML 的标记
（< script setup lang=“tsx”> 是 < script setup lang=“ts”> 的超集，不仅支持ts还支持jsx）

<script setup lang="tsx"> // 这里定义脚本使用语言为tsx
import { ElButton } from "element-plus"; //需要在页面中引入，不然使用报警告
const renderButton = () => {return (<ElButton type="primary" onClick={() => console.log("点击了按钮")}>按钮</ElButton>);
};
</script>

使用：

<renderButton />

效果：