将原生事件绑定到组件

官方的例子是晦涩难懂的，除非已经完全理解了，在这里给大家只用通俗易懂的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>

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

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

关注、留言，我们一起学习。

===============Talk is cheap, show me the code================

洋__

发布了231 篇原创文章 · 获赞 1037 · 访问量 92万+

他的留言板关注

将原生事件绑定到组件

猜你喜欢