VUE2解决div中 v-html不能触发点击事件不生效问题

在 Vue2 中，使用 v-html 指令动态渲染 HTML 代码时，如果 HTML 代码中包含有点击事件绑定，会出现点击事件不生效的问题。这是因为 v-html 渲染的 HTML 代码会被当做静态内容插入到 DOM 树中，而不会像 Vue 模板中的标签一样被 Vue 进行编译和渲染。

为了解决这个问题，可以使用 Vue2 的事件委托机制，将点击事件委托给父级元素或者根元素。

具体实现方法如下：

1. 在 div 标签上添加 @click.prevent="handleClick" 事件，用于捕获点击事件。

2. 在 handleClick 方法中，判断点击事件的 target 是否为包含有点击事件绑定的元素，如果是，则执行点击事件对应的方法。

3. 在包含有点击事件绑定的元素上添加一个自定义属性，用于标识该元素需要绑定点击事件。

4. 在 div 标签上使用 v-html 指令渲染 HTML 代码时，将包含有点击事件绑定的元素的自定义属性一同渲染出来。

示例代码如下：

HTML 代码：

<div @click.prevent="handleClick" v-html="html"></div>

Vue 实例：

new Vue({
  el: "#app",
  data: {
    html: `<p><a custom-click href="javascript:void(0)">点击我</a></p>`
  },
  methods: {
    handleClick(e) {
      const target = e.target;
      if (target.hasAttribute('custom-click')) {
        // 执行点击事件对应的方法
        console.log('点击事件生效了');
      }
    }
  },
  mounted() {
    // 在 v-html 渲染的 HTML 代码中添加自定义属性
    const a = document.querySelector('a[custom-click]');
    if (a) {
      a.setAttribute('custom-click', 'true');
    }
  }
});

通过以上方法，就可以实现在 div 中使用 v-html 渲染的 HTML 代码中绑定点击事件，同时点击事件也能够正常生效了。