在 Vue.js 中，我们经常需要使用 watch API 来监听数据的变化，并在数据变化时执行一些操作。在某些情况下，我们需要使用 $emit 传递事件给父组件。
然而，在某些情况下，我们会遇到一个问题：在 watch 中使用 this.$emit 会报错。这时候，我们需要采取一些措施来解决这个问题。本文将详细介绍这个问题，并提供解决方案。
问题描述
在 Vue.js 中，我们可以通过 watch API 来监听数据的变化。
watch: {
someData() {
// do something
}
}在 watch 中，我们可以访问组件实例的 this 对象。但是，在 watch 中使用 this.$emit 会报错：
Uncaught TypeError: this.$emit is not a function
这是因为，在 watch 中，this 对象并不指向组件实例。而是指向 watch 对象本身。因此，我们无法直接使用 this.$emit。
解决方案
为了解决这个问题，我们可以采用以下两种方法。
1. 使用箭头函数
在 watch 中，我们可以使用箭头函数来获取正确的 this 对象。因为箭头函数的 this 对象继承自父级作用域，而不是指向自己。因此，我们可以使用箭头函数来解决这个问题。
watch: {
someData: (newVal, oldVal) => {
this.$emit('some-event')
}
}通过这种方式，我们可以在 watch 中使用 this.$emit，而不会报错。
2. 使用 vm 对象
在 Vue.js 中，我们可以通过 $options 属性来访问组件的选项。其中，vm 属性指向组件实例。
因此，我们可以使用 vm.$emit 来解决这个问题。
watch: {
someData(newVal, oldVal) {
this.$options.vm.$emit('some-event')
}
}这样，我们就可以在 watch 中使用 vm.$emit 来传递事件给父组件。
示例代码
下面是一个完整的示例代码。
-- -------------------- ---- -------
----------
-----
------- -------------------------------------
--------------- ----------------------------- --
------
-----------
--------
------ -------------- ---- ----------------------
------ ------- -
----------- -
--------------
--
------ -
------ -
--------- -
-
--
------ -
---------------- ------- -
-- ------ -- ----- ----- --------
-- ----- -------------------- - -- -- -
-- ------------------------
-- -
-- ------ -- ----- -- ------
----- -------------------- - -- -- -
------------------------------------
-
----------------------
-
--
-------- -
----------------- -
--------------------- ------------
-
-
-
---------在上面的代码中，我们定义了一个 someData 数据，并通过按钮来改变它的值。
同时，我们引入了一个名为 ChildComponent 的子组件，并在父组件中绑定 some-event 事件。这个事件会在子组件中通过 $emit() 来触发。
在父组件中，我们使用了两种方法来监听 someData 的变化，并触发 some-event 事件。通过这两种方法，我们可以在 watch 中使用 $emit，而不会报错。
总结
在 Vue.js 中，我们经常需要使用 watch API 来监听数据变化，并通过 $emit 传递事件给父组件。但是，在 watch 中使用 $emit 会报错。为了解决这个问题，我们可以使用箭头函数或者 vm.$emit 来传递事件。
在实际开发中，我们需要根据具体情况来选择最适合的解决方案。总之，我们需要对 Vue.js 的 API 和机制有深入的了解，才能更好地应对各种问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64cb1c025ad90b6d041ed116