vue 2 监听事件
时间: 2023-10-26 19:08:13 浏览: 89
在Vue 2中,你可以使用`v-on`指令来监听事件。`v-on`指令可以用来监听***```html
<button v-on:click="handleClick">点击我</button>
```
```javascript
methods: {
handleClick() {
// 处理点击事件的逻辑
}
}
```
在上面的示例中,当按钮被点击时,会触发`handleClick`方法。
2. 监听自定义组件事件:
```html
<my-component v-on:custom-event="handleCustomEvent"></my-component>
```
```javascript
methods: {
handleCustomEvent(payload) {
// 处理自定义事件的逻辑
}
}
```
在上面的示例中,当`my-component`组件触发`custom-event`事件时,会调用`handleCustomEvent`方法。
3. 监听原生事件:
```html
<input v-on:focus="handleFocus">
```
```javascript
methods: {
handleFocus(event) {
// 处理输入框获得焦点事件的逻辑
}
}
```
在上面的示例中,当输入框获得焦点时,会触发`handleFocus`方法,并传入事件对象作为参数。
除了使用`v-on`指令,你还可以简写为`@`:
```html
<button @click="handleClick">点击我</button>
<my-component @custom-event="handleCustomEvent"></my-component>
<input @focus="handleFocus">
```
这些是Vue 2中监听事件的基本用法。有关更多高级用法,请参考Vue官方文档。
阅读全文