vue3 中模板字符串中添加click方法并传参

最新推荐文章于 2025-05-15 11:42:50 发布

原创最新推荐文章于 2025-05-15 11:42:50 发布 · 2.6k 阅读

CC 4.0 BY-SA版权

文章标签：

本文介绍了在工作中如何使用HTML字符串拼接生成DOM元素，并通过在onClick属性中设置JSON.stringify()来传递对象参数，以触发Vue3组合式API中的自定义方法sendObj，实现事件处理和参数传递。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

工作中遇到html字符串拼接出dom结构，并且需要触发事件和传参的场景。借此机会记录一下。

核心是利用html的onClick属性，触发单击事件，想要传递对象，必须要JSON.stringify()，否则控制台会报错

	// 传递对象
	const obj = {
		name: '张三',
		age: 12
	}

	const html = `
		<span onClick = 'sendObj(${JSON.stringify(obj)})'>传递参数</span>
	`

因为我是vue3组合式API，所以你可以根据你项目情况创建函数

	const sendObj = (value) => {
		console.log(value)
	}

	window.sendObj = sendObj