Vue字符串注入执行及Options API下href调用函数报错求助

问题原因 #

你遇到的Uncaught ReferenceError: MyFunction is not defined，本质是组件内定义的函数属于组件私有作用域，而javascript:协议的代码是在全局window上下文执行的，所以找不到组件里的函数。

解决方案 #

方案1：将组件函数挂载到全局（简单但需注意清理） #

如果必须保留javascript:链接的写法，可以把组件函数挂载到window对象上，让全局上下文能访问到。同时要在组件销毁时移除全局属性，避免内存泄漏：

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

<script>
export default {
  data() {
    return {
      my_div: '<a href="javascript:MyFunction(10)">link call function</a>'
    }
  },
  mounted() {
    // 将组件方法挂载到全局window
    window.MyFunction = this.MyFunction
  },
  beforeUnmount() {
    // 组件销毁时清理全局属性
    delete window.MyFunction
  },
  methods: {
    MyFunction(num) {
      alert(`收到参数：${num}`)
    }
  }
}
</script>

方案2：用事件委托替代javascript:（更符合Vue最佳实践） #

推荐这种方式，避免全局污染，更贴合Vue的响应式思想：

1. 给v-html的容器绑定点击事件
2. 通过事件委托判断点击的是目标链接，再执行组件方法

<template>
  <!-- 给容器绑定点击事件 -->
  <div v-html="my_div" @click="handleLinkClick"></div>
</template>

<script>
export default {
  data() {
    return {
      // 把href改成自定义属性，比如data-func，避免浏览器默认跳转
      my_div: '<a href="#" data-func="MyFunction" data-args="10">link call function</a>'
    }
  },
  methods: {
    handleLinkClick(e) {
      const target = e.target.closest('a[data-func]')
      if (target) {
        e.preventDefault() // 阻止默认跳转行为
        const funcName = target.dataset.func
        const args = target.dataset.args ? JSON.parse(target.dataset.args) : []
        // 调用组件内的方法
        this[funcName](args)
      }
    },
    MyFunction(num) {
      alert(`收到参数：${num}`)
    }
  }
}
</script>

关于Options API中定义可被HTML调用的函数的说明 #

• 如果是用javascript:的方式，必须把函数挂载到window全局（参考方案1），但不推荐，因为会污染全局作用域
• 更合理的方式是用事件委托（方案2），组件内的方法直接写在methods选项里，通过事件委托触发，不需要暴露到全局

内容的提问来源于stack exchange，提问作者jose