将原生事件绑定到组件

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

©️2020 CSDN 皮肤主题: 数字20 设计师:CSDN官方博客 返回首页