<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>