vue学习笔记--将原生事件绑定到组件

效果：

image.png

方法1:
当点击<h1 @click="handleclick1">你好</h1>时，子组件会间听到自身div 元素被点击了通过$emit 向外触发一个自定义事件,同时在<component1 @click="handleclick"></component1> 中又监听了这个自定义事件，这时handleclick1就会被执行。
html:

<div id="app">
<component1 @click="handleclick"></component1>
</div>

script :

Vue.component('component1', {
template: '<h1 @click="handleclick1">你好</h1>',
methods:{
handleclick1:function () {
this.$emit('click')
}
}
})
new Vue({
el:"#app",
methods:{
handleclick:function () {
alert('holl')
}
}
})

方法二：
通过 .native

<div id="app">
<component1 @click.native="handleclick"></component1>
</div>
script :
Vue.component('component1', {
template: '<h1>你好</h1>',
})
new Vue({
el:"#app",
methods:{
handleclick:function () {
alert('holl')
}
}
})