## vue 中的事件 * 组件自定义事件 * 原生 dom 事件 ## 事件绑定原理  ## 组件自定义事件 1. **自定义事件** ``` <HelloWord :msg="appMsg" @click="handleClick" /> ``` 2. **组件上的原生事件** ``` <HelloWord :msg="appMsg" @click.native="handleClick" /> ``` 3. **绑定动态事件** ``` <HelloWord :msg="appMsg" @click[eventName]="handleClick" /> ``` 4. **动态原生事件** ``` <HelloWord :msg="appMsg" @click[eventName].native="handleClick" /> ``` ### 自定义事件是如何初始化的 * vue 初始化时，会初始化event，初始化的就是 组件上的自定义事件 ## 原生 dom 事件 ### 访问原生 dom 事件 1. 传入 **$event** ``` <button @click="handleClick('say hello', $event)"></button> ``` 2. 没有参数的时候，handleClick接收的第一个参数就是原生 dom 事件 event ``` <button @click="handleClick()"></button> ``` ### vue 事件修饰符 * stop * prevent * capture * once * self - 元素对自身的点击 * passive - 滚动事件的默认行为 (即滚动行为) 将会立即触发 ### vue 按键修饰符 * enter * tab * space * 等等