<body>
<div id="root">
<child @click="handleClick"></child>
</div>
<script>
Vue.component('child',{
template:'<div>Child</div>'
})
var vm = new Vue({
el:"#root",
methods:{
handleClick:function(){
alert('click')
}
}
})
</script>
</body>
这个例子，最终页面上显示的是Child，上面这个代码的本意是想给一个点击事件，当点击Child的时候，页面会弹出来'click'这个弹窗。
但是用上面这个代码出来的页面，点击后是没有任何的反应的。
当给组件绑定事件的时候，实际上绑定的是一个自定义的事件，
下面是修改后的例子：
<body>
<div id="root">
<child @click="handleClick"></child>
</div>
<script>
Vue.component('child',{
template:'<div @click="handleChildClick">Child</div>',
methods:{
handleChildClick:function(){
alert('child click')
this.$emit('click')
}
}
})
var vm = new Vue({
el:"#root",
methods:{
handleClick:function(){
alert('click')
}
}
})
</script>
</body>
在局部组件中，div上绑定的事件是监听的原始事件，而在child标签上绑定的事件是监听的自定义事件，自定义事件的触发，也就是子组件去触发父组件事件的监听，需要调用this.emit('click')）,在child标签中监听到了这个自定义事件，这时这个handleClick事件就会被执行。
过程需要两层的传递，整个过程很麻烦。
需要用到一个新的东西,事件的修饰符：native
<body>
<div id="root">
<child @click.native="handleClick"></child>
</div>
<script>
Vue.component('child',{
template:'<div>Child</div>',
})
var vm = new Vue({
el:"#root",
methods:{
handleClick:function(){
alert('click')
}
}
})
</script>
</body>
这个时候，在组件上面做组件的监听，监听到的不是一个自定义的事件，而是原生的点击事件。这个时候监听的已经不是内部组件向外触发的自定义事件了，而是原生的点击事件。
网友评论