监听点击事件：
<template>
<div>
<button v-on:click="handleClick">Click me</button>
</div>
</template>
<script>
export default {
methods: {
handleClick() {
console.log('Button clicked!');
}
}
};
</script>
在上述示例中，使用 v-on:click 来监听按钮的点击事件，并在 handleClick 方法中执行相应的逻辑。
传递参数：
你可以通过内联函数来传递参数到事件处理函数中：
<template>
<div>
<button v-on:click="handleClick('Hello')">Click me</button>
</div>
</template>
<script>
export default {
methods: {
handleClick(message) {
console.log('Button clicked with message:', message);
}
}
};
</script>
事件修饰符：
Vue 3.0 也支持事件修饰符，用于处理事件的默认行为或冒泡。例如，.prevent 修饰符可以阻止默认行为：
<template>
<div>
<form v-on:submit.prevent="handleSubmit">
<button type="submit">Submit</button>
</form>
</div>
</template>
<script>
export default {
methods: {
handleSubmit() {
console.log('Form submitted!');
}
}
};
</script>
键盘事件：
监听键盘事件也是常见的需求，例如，监听 Enter 键：
<template>
<div>
<input v-on:keyup.enter="handleEnter" placeholder="Press Enter">
</div>
</template>
<script>
export default {
methods: {
handleEnter() {
console.log('Enter key pressed!');
}
}
};
</script>
自定义事件：
你也可以使用 this.$emit 在子组件中触发自定义事件，然后在父组件中监听：
<!-- 子组件 -->
<template>
<button @click="emitCustomEvent">Click me</button>
</template>
<script>
export default {
methods: {
emitCustomEvent() {
this.$emit('custom-event', 'Hello from child!');
}
}
};
</script>
<!-- 父组件 -->
<template>
<div>
<child-component @custom-event="handleCustomEvent"></child-component>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent
},
methods: {
handleCustomEvent(message) {
console.log('Custom event received:', message);
}
}
};
</script>
以上是 Vue 3.0 中事件处理的基本用法。事件处理是构建交互性应用的重要部分，Vue 提供了丰富的工具来简化和管理事件。
转载请注明出处：http://www.zyzy.cn/article/detail/488/Vue 3.0