<ul>
在组件上设置点击事件
<div id="app" >
<child @click="handleClick"></child>
</div>
<script>
Vue.component('child',{
template:`<div>Child</div>`
}),
new Vue({
el:'#app',
methods:{
handleClick(){
alert('click')
}
}
})
</script>
显然在Root组件中不能被触发,因为这时候 组件child
上的click
相当于自定义的一个事件,这时候需要通过this.$emit
去触发自定义事件
<div id="app" >
<child @click="handleClick"></child>
</div>
<script>
Vue.component('child',{
template:`<div @click="handleClick">Child</div>`,
methods:{
handleClick(){
this.$emit('click')
}
}
}),
new Vue({
el:'#app',
methods:{
handleClick(){
alert('click')
}
}
})
</script>
这时候就实现了点击事件,但是究其根本,这还是自定义事件,太过麻烦。
给组件绑定原生事件
非常简单:只要在事件绑定后面加上
.native
的修饰符就可以了
<div id="app" >
<child @click.native="handleClick"></child>
</div>
<script>
Vue.component('child',{
template:`<div >Child</div>`,
}),
new Vue({
el:'#app',
methods:{
handleClick(){
alert('click')
}
}
})
</script>
来源:https://segmentfault.com/a/1190000018631123