Vue 中给组件绑定原生事件
栏目: JavaScript · 发布时间: 6年前
内容简介:当我给一个组件绑定一个事件的时候,实际上这个事件绑定的是自定义的事件,也就是你真正的鼠标点击触发的事件,并不是我绑定的在元素上绑定的事件,监听的是原生事件,在组件上绑定的事件,监听的是自定义事件,需要用在开发的过程中这样写有点太麻烦,假如我有这样的需求,我就想在子组件上监听原生的事件,该怎么做呢?
绑定原生事件
<div id="root">
<child @click="handleClick"></child>
</div>
Vue.component('child',{
template:'<div @click="handleChildClick">content</div>',
methods: {
handleChildClick(){
alert('click child')
this.$emit('click')
}
}
})
let vm = new Vue({
el: '#root',
methods: {
handleClick(){
alert('click')
}
}
})
当我给一个组件绑定一个事件的时候,实际上这个事件绑定的是自定义的事件,也就是你真正的鼠标点击触发的事件,并不是我绑定的 click
事件,如果想触发自定义的 click
事件,在子组件里对元素进行事件绑定,这个事件才是真正的原生事件。
在元素上绑定的事件,监听的是原生事件,在组件上绑定的事件,监听的是自定义事件,需要用 this.$emit()
来触发。
在开发的过程中这样写有点太麻烦,假如我有这样的需求,我就想在子组件上监听原生的事件,该怎么做呢?
<div id="root">
<child @click.native="handleClick"></child> //native 是事件修饰符
</div>
Vue.component('child',{
template:'<div>content</div>',
})
let vm = new Vue({
el: '#root',
methods: {
handleClick(){
alert('click')
}
}
})
这个时候,在组件上面做事件的监听,并不是自定义事件,而是一个原生的 click
事件,只要在事件绑定的后面加上一个 native
这样的事件修饰符就可以了。
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:- Golang Echo数据绑定中time.Time类型绑定失败
- 如何在Symfony的表单中添加一个未绑定字段,否则绑定到一个实体?
- js双向绑定
- 延迟静态绑定——static
- 绑定自定义事件
- angular组件双向绑定
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
部落:一呼百应的力量
高汀 (Godin.S.) / 刘晖 / 中信出版社 / 2009-7 / 26.00元
部落指的是任何一群人,规模可大可小,他们因追随领导、志同道合而相互联系在一起。人类其实数百万年前就有部落的出现,随之还形成了宗教、种族、政治或甚至音乐。 互联网消除了地理隔离,降低了沟通成本并缩短了时间。博客和社交网站都有益于现有的部落扩张,并促进了网络部落的诞生——这些部落的人数从10个到1000万个不等,他们所关注的也许是iPhone,或一场政治运动,或阻止全球变暖的新方法。 那么......一起来看看 《部落:一呼百应的力量》 这本书的介绍吧!