在Vue实例中手动侦听鼠标事件 [英] Manually listen for mouse event in Vue instance
问题描述
我正在尝试从子组件中侦听子组件中的鼠标事件,但没有触发该事件.当我用html侦听事件时它起作用,但是不起作用
I am trying to listen to a mouse event in a child component from the component, but I don't get the event being fired. It works when I listen for the event in html, but not
这如您所见:
Vue.config.devtools = false;
Vue.config.productionTip = false;
new Vue({
el: '#mouse',
data: {
message: 'Hover Me!'
},
methods: {
mouseover: function() {
this.message = 'Good!'
},
mouseleave: function() {
this.message = 'Hover Me!'
}
}
});
body {
background: #333;
}
body #mouse {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: block;
width: 280px;
height: 50px;
margin: 0 auto;
line-height: 50px;
text-align: center;
color: #fff;
background: #007db9;
}
body #mouse a {
display: block;
width: 100%;
height: 100%;
cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<div id="mouse">
<a @mouseover="mouseover" @mouseleave="mouseleave">
{{message}}
</a>
</div>
该事件不起作用,因为事件侦听是通过代码完成的.
This one doesn't work because the event listening is done in code.
Vue.config.devtools = false;
Vue.config.productionTip = false;
new Vue({
el: '#mouse',
data: {
message: 'Hover Me!'
},
methods: {
mouseover: function() {
this.message = 'Good!'
},
mouseleave: function() {
this.message = 'Hover Me!'
},
mounted() {
this.$on('mouseleave', this.mouseleave);
}
}
});
body {
background: #333;
}
body #mouse {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: block;
width: 280px;
height: 50px;
margin: 0 auto;
line-height: 50px;
text-align: center;
color: #fff;
background: #007db9;
}
body #mouse a {
display: block;
width: 100%;
height: 100%;
cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<div id="mouse">
<a @mouseover="mouseover">
{{message}}
</a>
</div>
从组件本身而不是在html中手动侦听mouseleave
事件的正确方法是什么?
What is the correct way of manually listening for mouseleave
event from the component itself rather than in the html?
推荐答案
在第二个片段中,mounted
钩子函数应该在方法之外,这不能解决问题,而click
和mouseleave
之类的本机事件,如解释的 here
:
In the second snippet the mounted
hook function should be outside of methods, this will not solve the problem, and vm.$on
function is used for custom event not for native ones like click
and mouseleave
, like explained here
:
如果您这样称呼:
vm.$on('test', function (msg) {
console.log(msg)
})
您应该在某处输入类似以下代码的代码:
You should have a code like the following one somewhere :
vm.$emit('test', 'hi')
由于您无法使用this.$on
方法,因此我建议您使用通过提供link
或所需的任何内容,将ref
属性添加到a
元素中,从而在ref
中并在已挂接的挂钩中添加以下代码:
Since you're not able to use this.$on
method, i recommend you the following solution using ref
by adding ref
attribute to your a
element by giving link
or whatever you want and in the mounted hook add the following code:
this.$refs.link.addEventListener('mouseleave', () => {
this.mouseleave()
}, false);
Vue.config.devtools = false;
Vue.config.productionTip = false;
new Vue({
el: '#mouse',
data: {
message: 'Hover Me!'
},
methods: {
mouseover: function() {
this.message = 'Good!'
},
mouseleave: function() {
this.message = 'Hover Me!'
}
},
mounted() {
this.$refs.link.addEventListener('mouseleave', () => {
this.mouseleave()
}, false);
}
});
body {
background: #333;
}
body #mouse {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: block;
width: 280px;
height: 50px;
margin: 0 auto;
line-height: 50px;
text-align: center;
color: #fff;
background: #007db9;
}
body #mouse a {
display: block;
width: 100%;
height: 100%;
cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<div id="mouse">
<a @mouseover="mouseover" ref="link">
{{message}}
</a>
</div>
这篇关于在Vue实例中手动侦听鼠标事件的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!