Vue · 拼接html,绑定点击事件

在vue 的html拼接在添加点击事件用原生的onclick来触发事件，将事件挂在window上

方法一：

<template>
  <div v-html="htmlData">
  </div>
</template>

<script>
export default {
  data() {
    return {
      htmlData: "",
    };
  },
  mounted() {
    window.clickEvent = this.clickEvent;
  },
  created() {
    this.getData();
  },
  methods: {
    getData() {
      this.htmlData = '<div οnclick="clickEvent()"></div>';
    },
    clickEvent(url) {
      console.log("getPsd", url);
    },
  },
};
</script>

方法二：

<template>
  <div ref="HTML">
  </div>
</template>

<script>
export default {
  data() {
    return {
      htmlData: "",
    };
  },
  mounted() {
    window.clickEvent = this.clickEvent;
  },
  created() {
    this.getData();
  },
  methods: {
    getData() {
		var str = `
            <div οnclick="clickEvent()"></div>
          `;
          this.$refs.HTML.innerHTML += str
          // 解决的方式有很多中大家可已自行百度，例如使用事件代理
          // 因为绑定的是原生事件本实例采纳的是以下解决方式
         function clickEvent(){
             console.log('完美解决');
         }
        //  window.clickEvent=function(event, el){
        //      console.log('完美解决');
        //  }
    },
  },
};
</script>