Vue.js 中动态渲染带交互逻辑的自定义 HTML 元素的正确方式

霞舞 2026-01-05 00:00:00 次阅读

在 vue 模板中直接拼接 html 字符串并用 `v-html` 渲染，无法绑定响应式事件；真正可靠的方式是使用 render functions（或 jsx），通过 `h()` 函数创建可交互的虚拟节点。

在 Vue 开发中，常有需求根据参数动态生成具有特定行为（如点击事件）的 HTML 元素。初学者容易尝试在模板中调用方法返回 HTML 字符串，例如：

⚠️ 这种写法不会生效：

{{ }} 插值仅作纯文本渲染，返回的字符串会被原样显示为 HTML 源码；
即使改用 v-html（如），Vue 不会编译其中的指令（如 @click），事件绑定完全失效，handleClick 也无法被识别——因为 v-html 仅插入静态 DOM，不经过 Vue 的模板编译器。

✅ 正确解法：使用 Render Functions（组合式 API 中的 setup() 返回函数 + h()）

Render Functions 是 Vue 的底层渲染机制，允许你以编程方式创建响应式、可交互的 VNode。它绕过模板编译限制，直接控制虚拟 DOM 结构与行为：

立即学习“前端免费学习笔记（深入）”；

import { h } from 'vue'

export default {
  props: ['param1', 'param2', 'param3'],
  setup(props) {
    const handleClick = () => {
      alert(`Clicked with: ${props.param1}, ${props.param2}, ${props.param3}`)
    }

    return () => h('button', {
      class: 'custom-btn',
      onClick: handleClick,
      type: 'button'
    }, 'Click Me!')
  }
}

该写法优势显著：