临时:vue将原生事件绑定到组件
Posted gushixianqiancheng
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了临时:vue将原生事件绑定到组件相关的知识,希望对你有一定的参考价值。
来源https://blog.csdn.net/qq_24147051/article/details/89879282
首先我们定义一个 child 组件,什么事件都不绑定,代码如下: Vue.component(‘child‘, { template: ‘<button>click me</button>‘ }) // 然后我们在根组件中使用它,代码如下: <div id="app"> <child></child> </div> new Vue({ el: ‘#app‘ }) 1 2 3 4 5 6 7 8 9 10 11 正常情况下,我们点击 按钮 什么都不会发生对吧? 好,接下来呢,我们给 child 组件增加一个 @click 事件,代码如下: <div id="app"> <child @click="handleClick"></child> </div> 1 2 3 那么,这个 handleClick 方法是谁的呢?不用问,当然是父作用域下的方法啦,所以我们在根组件中增加一个方法,代码如下: new Vue({ el: ‘#app‘, methods: { handleClick () { alert(‘hello,world!‘) } } }) 1 2 3 4 5 6 7 8 9 可是呢,当你再次点击按钮的时候发现,没有 hello, world! 没有弹出,也就是说 handleClick 方法根本没有执行。别急!这个时候 .native 修饰符就派上用场了,我们在 @click 加上这个修饰符试试,代码如下: <div id="app"> <child @click.native="handleClick"></child> </div> 1 2 3 再点击一下看看效果吧!是不是就出来了? .native 修饰符的官方解释是: 监听组件根元素的原生事件! 当然,如果不用 .native 修饰符,我们也可以通过 $emit 事件派发给父组件也是可以的,代码如下: <div id="app"> <child @click="handleClick"></child> </div> // .native 修饰符 demo Vue.component(‘child‘, { template: ‘<button @click="click">click me </button>‘, methods: { click () { this.$emit(‘click‘, ‘i from child...‘) } } }) new Vue({ el: ‘#app‘, methods: { handleClick (val) { console.log(val) // ‘i from child...‘ } } })
以上是关于临时:vue将原生事件绑定到组件的主要内容,如果未能解决你的问题,请参考以下文章
vue-learning:28 - component - 组件事件的修饰符`.native / .sync`,以及组件属性`model`