将原生事件绑定到组件

砖业洋__

发布于 2023-05-06 20:01:57

6930

发布于 2023-05-06 20:01:57

文章被收录于专栏：博客迁移同步

官方的例子是晦涩难懂的，除非已经完全理解了，在这里给大家只用通俗易懂的3个例子解释这个问题

第一个例子

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>将原生事件绑定到组件
        </title>
        <script src="https://unpkg.com/vue"></script>
    </head>
    <body>
        <div id="app">
            <child @click="handleClick"></child>
        </div>
        <script> 
            Vue.component('child', {
                template: '<div>Child</div>'
            })
            var vm = new Vue({
                el: '#app',
                methods:{
                    handleClick() {
                        alert('click');
                    }
                }
            })
        </script>
    </body>
</html>

会出现点击Child的时候alert弹出一个click吗？

不会！根本不弹出来，我们的click监听加在了自定义组件，是无法触发的，还记得怎么触发自定义组件的监听吗？那是在子组件调用$emit方法。

那么我们需要在原生组件加监听怎么做呢？在这里，你可以在template里面直接加上，代码如下

第二个例子

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>将原生事件绑定到组件
        </title>
        <script src="https://unpkg.com/vue"></script>
    </head>
    <body>
        <div id="app">
            <child></child>
        </div>
        <script> 
            Vue.component('child', {
                template: '<div @click="handleClick">Child</div>',
                methods:{
                    handleClick() {
                        alert('click');
                    }
                }
            })
            var vm = new Vue({
                el: '#app'
            })
        </script>
    </body>
</html>

这样点击click就可弹出alert对话框了，或者methods写在全局，然后子组件this.$emit去触发执行也可以达到效果，但是这样结构太混乱了，几层传递太麻烦了，能不能一步到位？

当然也是可以的，就像第一个例子，在自定义组件上面写监听，我就想监听这个组件里面模板的东西，可以直接在自定义组件写@click.native

第三个例子

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>将原生事件绑定到组件
        </title>
        <script src="https://unpkg.com/vue"></script>
    </head>
    <body>
        <div id="app">
            <child @click.native="handleClick"></child>
        </div>
        <script> 
            Vue.component('child', {
                template: '<div>Child</div>'
            })
            var vm = new Vue({
                el: '#app',
                methods:{
                    handleClick() {
                        alert('click');
                    }
                }
            })
        </script>
    </body>
</html>

这样就完成啦，推荐这种写法！

官方文档见这里将原生事件绑定到组件

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2023-05-04，如有侵权请联系 cloudcommunity@tencent.com 删除

html