解决vue3中使用v-html，click不生效的问题

在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 捕获并处理了。