### 彪哥

爱好前端

- 基础

- 组件

  - 使用组件的细节点
  - 父组件给子组件传值
  - 子组件派发事件和值给父组件
  - Prop 验证 与 非 Prop 的 Attribute
  - 自定义事件
  - 兄弟组件传值
  - 非父子组件传值
  - 父组件调用子组件方法并传入值
  - 插槽slot
  - 动态组件与 v-once 指令
  - vue父子组件的生命周期顺序

- 过渡&动画

- 可复用性&组合

- 工具

- 规模化

- Vuex

- 其他

- 《Vue》笔记
- 组件

heBody
2020-02-15
目录

# 自定义事件

# # 自定义事件

API
(opens new window)

### # 在组件标签v-on绑定的事件是自定义事件

    <div id="root">
        <child @click="handleClick"></child> <!--这里click是自定义事件-->
    </div>

    <script type="text/javascript">
        Vue.component('child', {
            template: '<button>Child</button>',
        })

        var vm = new Vue({
            el: '#root'
            methods: {
                handleClick() {
                    alert('click')
                }
            }
        })
    </script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

上面这种情况，当点击子组件时并不会触发`handleClick()`事件，因为此时的`click`并非原生的点击事件，而是一个自定义事件。

要想触发组件标签中的`click`事件需要通过子组件`$emit`来派发

    <div id="root">
        <child @click="handleClick"></child>
    </div>

    <script type="text/javascript">
        Vue.component('child', {
            template: '<button @click="handleChildClick">Child</button>', // 这里的click是原生事件
            methods: {
                handleChildClick() {
                    this.$emit('click')
                }
            }
        })

        var vm = new Vue({
            el: '#root'
            methods: {
                handleClick() {
                    alert('click')
                }
            }
        })
    </script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

上面代码中，子组件内的`click`是原生点击事件，通过`$emit`派发`click`自定义事件触发父组件的`handleClick()`

### # 使自定义事件变为原生事件

使用`.native`修饰符把自定义事件变为原生事件

    <div id="root">
        <child @click.native="handleClick"></child> <!--自定义事件添加了native修饰符变原生事件-->
    </div>

    <script type="text/javascript">
        Vue.component('child', {
            template: '<button>Child</button>',
        })

        var vm = new Vue({
            el: '#root'
            methods: {
                handleClick() {
                    alert('click')
                }
            }
        })
    </script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

上面代码中，自定义事件`click`添加了`.native`修饰符，使其变为原生事件，从而触发`handleClick()`。

### # 自定义事件名会自动变小写

当使用camelCase（驼峰）命名的自定义函数

    this.$emit('myEvent')

1

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

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

1
2

`v-on` 事件监听器在 DOM 模板中会被自动转换为全小写 (因为 HTML 是大小写不敏感的)，所以 `v-on:myEvent` 将会变成 `v-on:myevent`——导致 `myEvent` 不可能被监听到。

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

编辑
(opens new window)
#Vue
上次更新: 2022/12/14, 19:36:42
Prop 验证 与 非 Prop 的 Attribute
兄弟组件传值

← Prop 验证 与 非 Prop 的 Attribute 兄弟组件传值→

最近更新

  01
Git修改分支名
08-11

  02
CSS给table的tbody添加滚动条
06-29

  03
我做了一个手写春联小网页，祝大家虎年暴富 原创
01-28

更多文章>

Copyright © 2016-2022 Hesb | MIT License

- 跟随系统
- 浅色模式
- 深色模式
- 阅读模式