Vue 如何给组件绑定原生事件

最新推荐文章于 2022-10-24 10:27:44 发布

weixin_34204722

最新推荐文章于 2022-10-24 10:27:44 发布

阅读量854

点赞数

文章标签： javascript ViewUI

原文链接：https://juejin.im/post/5ca6fc70e51d4548d07bc21b

版权

由于组件上面的事件默认为自定义事件，那么此例中<child @click="handleClick"></child>不会被系统识别为我们理解中的点击事件必须通过$emit方法绑定它才行。

<body>
    <div id="root">
        <child @click="handleClick"></child>
    </div>
    <script>
        Vue.component('child',{
            template:'<div @click="handleChildClick">Child</div>',
            methods:{
                handleChildClick:function(){
                    alert('child click')
                    this.$emit('click')
                }
            }
        })

        var vm = new Vue({
            el: '#root',
            methods: {
                handleClick:function(){
                    alert('click')
                }
            }
        })
    </script>
</body>
复制代码

这样组件内外都要定义方法未免有点麻烦，那么想在组件上直接使用原生事件怎么办？给事件加个后缀.native就行：

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

显然，我们推荐第二种方法，代码少了不是一行两行啊～

转载于:https://juejin.im/post/5ca6fc70e51d4548d07bc21b