Skip to content

自定义事件

事件名

不同于组件和 prop，事件名不存在任何自动化的大小写转换。而是触发的事件名需要完全匹配监听这个事件所用的名称。举个例子，如果触发一个 camelCase 名字的事件：

1
this.$emit('myEvent')

则监听这个名字的 kebab-case 版本是不会有任何效果的：

1
2
<!-- 没有效果 -->
<my-component v-on:my-event="doSomething"></my-component>

不同于组件和 prop，事件名不会被用作一个 JavaScript 变量名或属性名，所以就没有理由使用 camelCase 或 PascalCase 了。并且 v-on 事件监听器在 DOM 模板中会被自动转换为全小写 (因为 HTML 是大小写不敏感的)，所以 v-on:myEvent 将会变成 v-on:myevent——导致 myEvent 不可能被监听到。

因此，我们推荐你始终使用 kebab-case 的事件名。

将原生事件绑定到组件

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
<div id="root">
    <child @click="handleClick"></child>
</div>
<script>
    Vue.component('child', {
        template: '<div @click="handleChildClick">Child</div>',
        methods: {
            handleChildClick: function() {
                alert('handleChildClick');
                this.$emit('click')
            }
        }
    })
    var vm = new Vue({
        el: "#root",
        methods: {
            handleClick: function() {
                alert('father click')
            }
        }
    })
</script>

你可能有很多次想要在一个组件的根元素上直接监听一个原生事件。这时，你可以使用 v-on 的 .native修饰符：

1
<base-input v-on:focus.native="onFocus"></base-input>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
<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('father click')
            }
        }
    })
</script>