在Vue 3中，由于安全性考虑，默认不允许使用 v-html 指令来渲染未经过处理的 HTML 字符串，因为这可能会导致跨站脚本攻击（XSS）。如果你需要渲染原始 HTML，你可以使用 v-html，但同时你需要确保这些内容是安全的，或者你可以使用 v-safe-html 指令（如果你使用了 vue-next 并且开启了 compatConfig.COMPILER_V_BIND_SYNC 特性）。
如果你遇到了 v-html 内容被点击事件忽略的问题，可能是因为 Vue 没有在动态插入的 DOM 内容上绑定事件监听器。这种情况下，你可以使用 Vue 的 ref 和 $el 属性来手动绑定事件。
以下是一个简单的示例，展示如何在 Vue 3 中使用 ref 和 $el 来解决 v-html 内容的点击事件不生效问题：
<template>
<div>
<div ref="htmlContainer" v-html="rawHtml"></div>
</div>
</template>
<script setup>
import { ref, onMounted } from 'vue';
const rawHtml = ref('<button>Click Me</button>');
const htmlContainer = ref(null);
onMounted(() => {
const button = htmlContainer.value.$el.querySelector('button');
if (button) {
button.addEventListener('click', handleClick);
}
});
function handleClick() {
alert('Button clicked!');
}
</script>在这个例子中，我们首先通过 v-html 指令插入 HTML 内容。然后，在 onMounted 钩子中，我们通过 htmlContainer.value.$el.querySelector 获取到动态插入的 DOM 中的按钮，并为其添加 click 事件监听器。这样，点击事件就能正确被 Vue 捕获并处理了。