一、Vue3 事件处理
在 Vue 3 中，事件处理与 Vue 2 非常相似，但有一些细微的改进和新的语法。Vue 3 仍然使用 v-on 指令来处理 DOM 事件，或者更常见的是使用其简写形式 @。
下面是一些 Vue 3 中事件处理的基本概念和示例：
基本用法
你可以使用 @ 符号来监听 DOM 事件，并在触发时执行一些 JavaScript 代码。
<template>
<button @click="handleClick">点击我</button>
</template>
<script>
export default {
setup() {
const handleClick = () => {
console.log('按钮被点击了！');
};
return {
handleClick
};
}
}
</script>
事件处理函数
事件处理函数可以直接在模板中定义，也可以在 setup 函数中定义并返回。
<template>
<!-- 直接在模板中定义事件处理函数 -->
<button @click="() => console.log('按钮被点击了！')">点击我</button>
<!-- 使用 setup 中定义的事件处理函数 -->
<button @click="handleClick">点击我</button>
</template>
<script>
export default {
setup() {
const handleClick = () => {
console.log('按钮被点击了！');
};
return {
handleClick
};
}
}
</script>
传递参数
你可以向事件处理函数传递参数。
<template>
<button @click="handleClick('Hello, Vue 3!')">点击我</button>
</template>
<script>
export default {
setup() {
const handleClick = (message) => {
console.log(message); // 输出 "Hello, Vue 3!"
};
return {
handleClick
};
}
}
</script>
事件修饰符
Vue 3 仍然支持事件修饰符，如 .stop、.prevent、.capture、.self 等。
<template>
<form @submit.prevent="handleSubmit">
<input type="text" @keyup.enter="handleEnter" />
</form>
</template>
<script>
export default {
setup() {
const handleSubmit = (event) => {
event.preventDefault();
console.log('表单提交被阻止了');
};
const handleEnter = () => {
console.log('Enter 键被按下');
};
return {
handleSubmit,
handleEnter
};
}
}
</script>
自定义事件
在 Vue 组件中，你可以使用 $emit 方法触发自定义事件，并在父组件中监听这些事件。
<!-- ChildComponent.vue -->
<template>
<button @click="emitClick">点击我</button>
</template>
<script>
export default {
setup(props, {
emit }) {
const emitClick = () => {
emit('click'); // 触发名为 "click" 的自定义事件
};
return {
emitClick
};
}
}
</script>
在父组件中监听自定义事件：
<!-- ParentComponent.vue -->
<template>
<ChildComponent @click="handleChildClick" />
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent
},
setup() {
const handleChildClick = () => {
console.log('子组件的 "click" 事件被触发了');
};
return {
handleChildClick
};
}
}
</script>
这些是 Vue 3 中事件处理的基本概念。Vue 3 还提供了更高级的事件处理功能，如事件监听器的条件化、事件侦听器的批量管理、使用 v-model 进行表单输入和应用状态之间的双向绑定等。
二、vue3 事件修饰符
在 Vue 3 中，事件修饰符仍然是一个方便的工具，用于在模板中直接修改 DOM 事件的默认行为。下面是一些 Vue 3 中常用的事件修饰符及其案例：
阻止默认行为
.prevent - 调用 event.preventDefault()。
<template>
<form @submit.prevent="handleSubmit">
<input type="submit" value="Submit" />
</form>
</template>
<script>
export default {
setup() {
const handleSubmit = () => {
console.log('表单提交被阻止了');
};
return {
handleSubmit
};
}
}
</script>
阻止事件冒泡
.stop - 调用 event.stopPropagation()。
<template>
<div @click="outerClick">
外层
<button @click.stop="innerClick">内层按钮</button>
</div>
</template>
<script>
export default {
setup() {
const outerClick = () => {
console.log('外层被点击');
};
const innerClick = () => {
console.log('内层按钮被点击');
};
return {
outerClick,
innerClick
};
}
}
</script>
捕获阶段触发
.capture - 使用事件捕获模式，即元素自身的事件先不触发，等待该元素的所有祖先元素的事件触发完毕之后，才会触发该元素的事件。
<template>
<div @click="outerClick" style="padding: 20px; background: lightgray;">
外层
<button @click.capture="innerClick" style="padding: 10px; background: lightblue;">
内层按钮
</button>
</div>
</template>
<script>
export default {
setup() {
const outerClick = () => {
console.log('外层被点击');
};
const innerClick = () => {
console.log('内层按钮被点击');
};
return {
outerClick,
innerClick
};
}
}
</script>
只在事件发生在元素自身时触发
.self - 只当事件在该元素本身（而不是子元素）触发时触发回调。
<template>
<div @click.self="divClicked" style="padding: 20px; background: lightgray;">
点击我或我的子元素
<button @click="buttonClicked" style="padding: 10px; background: lightblue;">
点击子元素
</button>
</div>
</template>
<script>
export default {
setup() {
const divClicked = () => {
console.log('div 被点击');
};
const buttonClicked = () => {
console.log('按钮被点击');
};
return {
divClicked,
buttonClicked
};
}
}
</script>
只当在元素及其子元素上都没有点击事件时触发
.once - 事件将只会触发一次。
<template>
<button @click.once="handleClick">点击我</button>
</template>
<script>
export default {
setup() {
let count = 0;
const handleClick = () => {
count++;
console.log(`按钮被点击了 ${
count} 次`);
};
return {
handleClick
};
}
}
</script>
修饰键
Vue 3 还支持一些修饰键，如 .ctrl、.shift、.alt、.meta（对应 cmd 或 win 键）。
<template>
<input
type="text"
@keyup.enter="handleEnter"
@keyup.ctrl.enter="handleCtrlEnter"
/>
</template>
<script>
export default {
setup() {
const handleEnter = () => {
console.log('Enter 键被按下');
};
const handleCtrlEnter = () => {
console.log('Ctrl + Enter 组合键被按下');
})
return {
handleCtrlEnter
}
}
}
</script>
