将原生事件绑定到组件

最新推荐文章于 2022-12-19 12:32:06 发布

砖业洋__

最新推荐文章于 2022-12-19 12:32:06 发布

阅读量785

点赞数 11

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/qq_34115899/article/details/104315069

版权

vue 专栏收录该内容

14 篇文章 16 订阅

订阅专栏

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

砖业洋__

关注

11
点赞
踩
5

收藏

觉得还不错? 一键收藏
打赏
0
评论
将原生事件绑定到组件

官方的例子是晦涩难懂的，除非已经完全理解了，在这里给大家只用通俗易懂的3个例子解释这个问题第一个例子<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>组件细节is使用 </tit...
复制链接

扫一扫