Vue class 组件AddEventListener 和RemoveEventListener 用法
Vue class component AddEventListener and RemoveEventListener usage
我想使用 mousedown
、mousemove
和 mouseup
事件实现可拖动线。
在我的第一次尝试中,我尝试使用箭头函数-class-属性:https://codesandbox.io/s/example-1-15psm?fontsize=14&hidenavigation=1&theme=dark
但是 Test.vue
中的 属性 position
似乎没有反应。不确定,但我猜是因为 this Vue 限制:
Don’t use arrow functions on an options property or callback, such as created: () => console.log(this.a)
or vm.$watch('a', newValue => this.myMethod())
. Since an arrow function doesn’t have a this
, this
will be treated as any other variable and lexically looked up through parent scopes until found, often resulting in errors such as Uncaught TypeError: Cannot read property of undefined
or Uncaught TypeError: this.myMethod is not a function
.
在第二次尝试中,我尝试使用标准 class 方法:
https://codesandbox.io/s/example-2-t7beu?fontsize=14&hidenavigation=1&theme=dark
它有效,除了因为 Test.vue
中的绑定函数 onMouseMove
和 onMouseUp
是匿名的我不能用 removeEventListener
.
解除绑定
那么,在 Vue class 组件中使用 addEventListener
和 removeEventListener
的正确方法是什么?
我过度设计了我的代码。
无需使用 arrow-functions-class-properties
,或使用 method.bind(this)
定义上下文。以下代码应该有效:
import { Vue, Component } from "vue-property-decorator";
@Component
export default class Test extends Vue {
position = 0;
onMouseMove(e) {
let position = this.position;
position += e.movementY;
this.position = position;
console.log("onMouseMove", this.position);
}
onMouseUp() {
console.log("onMouseUp", this.position);
document.removeEventListener("mousemove", this.onMouseMove);
document.removeEventListener("mouseup", this.onMouseUp);
}
onMouseDown() {
console.log("onMouseDown", this.position);
document.addEventListener("mousemove", this.onMouseMove);
document.addEventListener("mouseup", this.onMouseUp);
}
}
工作示例:https://codesandbox.io/s/example-2-t7beu?fontsize=14&hidenavigation=1&theme=dark
我想使用 mousedown
、mousemove
和 mouseup
事件实现可拖动线。
在我的第一次尝试中,我尝试使用箭头函数-class-属性:https://codesandbox.io/s/example-1-15psm?fontsize=14&hidenavigation=1&theme=dark
但是 Test.vue
中的 属性 position
似乎没有反应。不确定,但我猜是因为 this Vue 限制:
Don’t use arrow functions on an options property or callback, such as
created: () => console.log(this.a)
orvm.$watch('a', newValue => this.myMethod())
. Since an arrow function doesn’t have athis
,this
will be treated as any other variable and lexically looked up through parent scopes until found, often resulting in errors such as UncaughtTypeError: Cannot read property of undefined
orUncaught TypeError: this.myMethod is not a function
.
在第二次尝试中,我尝试使用标准 class 方法: https://codesandbox.io/s/example-2-t7beu?fontsize=14&hidenavigation=1&theme=dark
它有效,除了因为 Test.vue
中的绑定函数 onMouseMove
和 onMouseUp
是匿名的我不能用 removeEventListener
.
那么,在 Vue class 组件中使用 addEventListener
和 removeEventListener
的正确方法是什么?
我过度设计了我的代码。
无需使用 arrow-functions-class-properties
,或使用 method.bind(this)
定义上下文。以下代码应该有效:
import { Vue, Component } from "vue-property-decorator";
@Component
export default class Test extends Vue {
position = 0;
onMouseMove(e) {
let position = this.position;
position += e.movementY;
this.position = position;
console.log("onMouseMove", this.position);
}
onMouseUp() {
console.log("onMouseUp", this.position);
document.removeEventListener("mousemove", this.onMouseMove);
document.removeEventListener("mouseup", this.onMouseUp);
}
onMouseDown() {
console.log("onMouseDown", this.position);
document.addEventListener("mousemove", this.onMouseMove);
document.addEventListener("mouseup", this.onMouseUp);
}
}
工作示例:https://codesandbox.io/s/example-2-t7beu?fontsize=14&hidenavigation=1&theme=dark