当前位置：首页 > news >正文

vue3在ts中动态添加DOM（1、使用render函数，2、使用tsx）

news 2025/7/4 3:30:33

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>