vue html绑定点击事件,vue实现在v-html的html字符串中绑定事件

在 Vue 中，可以通过 `v-on` 或简写的 `@` 来绑定事件。但是，如果要在 `v-html` 中绑定事件，需要一些特殊的处理。

由于在 `v-html` 中直接绑定事件会被视为字符串而不是代码，因此需要使用 Vue 提供的 `$compile` 方法来编译字符串并将其转换为可执行的代码。具体实现如下：

<template>
  <div v-html="html" ref="container"></div>
</template>

<script>
export default {
  data() {
    return {
      html: '<button @click="handleClick">Click me</button>',
    };
  },
  mounted() {
    this.$nextTick(() => {
      const container = this.$refs.container;
      const buttons = container.querySelectorAll('button');
      
      for (let i = 0; i < buttons.length; i++) {
        const button = buttons[i];
        const clickAttr = button.getAttribute('@click');
        
        if (clickAttr) {
          const fn = this.$compile(`() => { ${clickAttr} }`).bind(this);
          button.addEventListener('click', fn);
        }
      }
    });
  },
  methods: {
    handleClick() {
      console.log('Button clicked');
    },
  },
};
</script>

在上面的代码中，我们首先在 `data` 中定义了一个包含 HTML 代码的字符串。然后在模板中使用 `v-html` 将其渲染出来，并在 `mounted` 钩子函数中通过 `$compile` 方法编译出其中的代码并绑定事件。

需要注意的是，由于 `$compile` 方法不会自动绑定 `this`，因此我们需要通过 `bind` 方法将当前实例作为上下文传递给编译出的函数。