【记录】vue3在v-html或js渲染html中赋值点击事件

在Vue 3中，如果你需要在渲染的HTML中绑定点击事件，你可以使用v-html指令来插入HTML，并结合@click事件修饰符来绑定点击事件处理函数。但请注意，使用v-html可能会有XSS攻击的风险，因此请确保你插入的内容是安全的。

以下是一个简单的例子：

<template>
  <div v-html="rawHtml" @click="handleClick"></div>
</template>
 
<script setup>
import { ref } from 'vue';
 
const rawHtml = ref('<button>Click Me</button>');
 
function handleClick(event) {
  // 检查事件目标是否为button
  if (event.target.tagName.toLowerCase() === 'button') {
    alert('Button clicked!');
  }
}
</script>

在这个例子中，handleClick函数会在任何子元素被点击时触发，如果你点击了button，它会显示一个警告框。如果你点击的不是button，handleClick不会做任何事情。

请记住，通过v-html插入的内容会被当作纯文本插入，不会编译为Vue组件。如果你需要在这些内容中绑定Vue指令或组件，你可能需要使用更复杂的方法，例如使用vue-loader来预编译模板或者使用h函数来手动创建VNode。