Vue给动态添加的HTML绑定事件

定义HTML字符串的方式

• 利用ES6的模板字符串方式。在事件需要传参的情况下，如要传入对象和数组。则不能使用此方法
• 字符串拼接的方式。任何类型的参数都可以传递。
• 给事件传参的时候要注意双引号和单引号的问题

<template>
  <div id="pop"></div>
</template>

<script>
export default {
  data() {
    return {
      obj: {
        name: "张三",
        num: ["1", 2],
        img: "https://www.jianshu.com/p/a3d89f9443a1"
      }
    }
  },
  mounted() {
    window.handleClick = this.handleClick
    this.init()
  },
  beforeDestroy() {
    window.handleClick = null
  },
  methods: {
    init() {
      let div = document.getElementById('pop')
      let obj = JSON.stringify(this.obj)
      /* 利用es6的模板字符串的方法，要注意一个问题，不能传入对象和数组
      let str = `
        <div onClick="handleClick('${obj}')">点击我</div>
      `
      */

      //  推荐使用字符串拼接传参，不过要注意双引号和单引号的问题
      let str = "<div onClick='handleClick(" + obj + ")'>点击我</div>"
      div.innerHTML = str
    },
    handleClick(item) {
      console.log(item)
    }
  },
}
</script>

<style>

</style>