Vue中使用jQuery、DataTables时回调无法调用组件方法是什么原因

核心是jQuery事件回调的this指向不符合预期：

• jQuery的事件处理函数中，this默认指向触发事件的DOM元素，也就是你点击的<tr>节点，并非当前Vue组件实例。此时调用this.ddd()实际是从DOM元素上查找ddd方法，自然找不到，调用无响应。

两种常用改法按需选择：

方案1：箭头函数改写回调 #

箭头函数不会创建独立的this作用域，会继承外层mounted钩子的this（即Vue组件实例）：

<script>
export default {
  methods: {
    ddd() {
      alert(44444444);
    },
  },
  mounted: function () {
    let table = new DataTable("#tbl", {});
    // 把回调改成箭头函数
    $("#tbl tbody").on("click", "tr", () => {
      this.ddd();
    });
  },
};
</script>

方案2：提前保存Vue实例引用 #

如果回调内需要同时操作<tr> DOM元素和调用Vue方法，可以在mounted开头把组件实例存为变量：

<script>
export default {
  methods: {
    ddd() {
      alert(44444444);
    },
  },
  mounted: function () {
    const vm = this; // 提前保存Vue实例
    let table = new DataTable("#tbl", {});
    $("#tbl tbody").on("click", "tr", function () {
      // 这里this还是tr DOM元素，需要操作DOM可以直接用
      vm.ddd(); // 用提前保存的实例调用组件方法
    });
  },
};
</script>

组件销毁时要手动解绑jQuery绑定的事件，避免内存泄漏：

beforeUnmount() {
  $("#tbl tbody").off("click", "tr");
}

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