vue之如何在组件上绑定原生事件

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

JessicaLilyAn

3028人浏览 · 2019-06-26 14:29:24

JessicaLilyAn · 2019-06-26 14:29:24 发布

由于组件上面的事件默认为自定义事件，那么此例中<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>

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

微信公号搜索：李大头头。（或扫描二维码）找我来玩。

更多【前端技术群】和【内推职位】资源等着你。

还不定期在公众号请大家喝奶茶！

想与我聊聊或者有什么问题都可以在公众号找到我。

等你哟~

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^