Vue自定义事件和原生事件

Vue自定义事件和原生事件

• 自定义事件：子组件在父组件中使用时，直接绑定在子组件上的事件就是自定义事件，必须经过子组件的触发才能执行
• 原生事件：直接在子组件里的模板上绑定的事件，子组件引入后是可以直接使用的

<div id="root"><!--  在这里绑定的是自定义事件，必须经过子组件的触发才能执行 --><child @click='handleClick'></child></div><script>Vue.component('child', {// 这里绑定的是原生事件 template: 'click',methods: {handleChildClick() {alert('child click')//  $emit触发自定义事件this.$emit('click')}}})var vm = new Vue({el: '#root',methods: {handleClick() {alert('click')}}})</script>

点此在线演示

• 怎么在父组件的子组件里直接绑定原生事件，不用子组件的再次触发呢？
  答案是直接在绑定的自定义事件后加上修饰符.native

<div id="root"><!--  通过.native触发 --><child @click.native='handleClick'></child></div><script>Vue.component('child', {// 这里绑定的是原生事件 template: 'click',methods: {handleChildClick() {alert('child click')//此处删去$emit}}})var vm = new Vue({el: '#root',methods: {handleClick() {alert('click')}}})</script>

点此在线演示

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！