Vue-给组件绑定原生事件

是Ryan吖

于 2020-05-13 17:49:40 发布

阅读量1.9k

点赞数 1

分类专栏： Vue

本文链接：https://blog.youkuaiyun.com/weixin_45497246/article/details/106103141

版权

Vue 专栏收录该内容

23 篇文章

订阅专栏

本文探讨了在Vue中如何为组件绑定原生事件，而非自定义事件。默认情况下，Vue的事件绑定处理的是自定义事件。通过在事件名后添加`native`修饰符，可以实现直接监听元素的原生事件。例如，使用`@click.native`来监听真实的点击事件，而不需要在子组件内部进行事件绑定。这种方式简化了开发过程中的事件处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

当我给一个组件绑定一个事件的时候，实际上这个事件绑定的是自定义的事件，也就是你真正的鼠标点击触发的事件，并不是我绑定的click事件。

所以在下面这个例子里，点击子组件，并不会有弹窗提示。
在这里插入图片描述
如果想触发自定义的click事件，就得在子组件里对元素进行事件绑定，这个事件才是真正的原生事件。

在元素上绑定的事件，监听的是原生事件
在组件上绑定的事件，监听的是自定义事件，需要用this.$emit()来触发。

也就是酱婶的：
在这里插入图片描述
在开发的过程中这样写有点太麻烦，假如我有这样的需求，我就想在子组件上监听原生的事件，该怎么做呢？

只要在事件绑定的后面加上一个native这样的事件修饰符就可以了。

<div id="root">
        <child @click.native="handleClick"></child>
    </div>
    <script>
        Vue.component('child',{
            template:'<div>click</div>'
        })
        var vm = new Vue({
            el:"#root",
            methods: {
                handleClick(){
                    alert('click')
                }
            },
        })
    </script>