接下来我们继续探讨文档
event对象
在Vue.js中,$event
变量或箭头函数中的event
参数用于捕获原始的DOM事件对象。这个对象包含了所有与特定事件相关的信息,比如鼠标点击的位置、键盘按键的键码、触摸事件的触摸点等。
当你在事件处理器中需要做一些基于事件本身的处理时,如阻止默认行为(event.preventDefault()
)、停止事件传播(event.stopPropagation()
)、检查事件的详细信息等,就需要使用这个事件对象。
如果不传递event
,你将无法访问这些功能。例如,如果你有一个表单提交按钮,你可能希望在警告用户之前阻止表单的默认提交行为。如果没有event
参数,你就不能调用preventDefault()
,这可能会导致页面刷新,即使你正在尝试警告用户。
<template>
<form @submit="onSubmit">
<input type="text" placeholder="Type something...">
<button>Submit</button>
</form>
</template>
export default {
methods: {
onSubmit(event) {
event.preventDefault(); // 阻止表单的默认提交行为
console.log('Form submitted');
console.log('Input value:', document.querySelector('input').value);
}
}
}
事件修饰符
对于子元素父元素有重叠风险的:
1. .stop
假设你有一个父元素和一个子元素,当你点击子元素时,你希望只触发子元素的事件处理器,而不触发父元素的处理器。
<div id="parent" @click="logParentClick">
2 Parent element
3 <button id="child" @click.stop="logChildClick">Click me!</button>
4</div>
new Vue({
el: '#app',
methods: {
logParentClick() {
console.log('Parent clicked');
},
logChildClick() {
console.log('Child clicked');
}
}
});
在这个例子中,当你点击按钮时,只会输出 "Child clicked",而不会输出 "Parent clicked"。这是因为.stop
修饰符阻止了点击事件从子元素传递到父元素。
2. .prevent
假设你有一个表单,当用户提交表单时,你不希望页面刷新,而是显示一条消息。
<form @submit.prevent="logFormSubmit">
<input type="text" placeholder="Enter your name">
<button type="submit">Submit</button>
</form>
new Vue({
el: '#app',
methods: {
logFormSubmit() {
console.log('Form submitted');
}
}
});
在这个例子中,当你提交表单时,页面不会刷新,而是输出 "Form submitted" 到控制台。这是因为.prevent
修饰符阻止了表单的默认提交行为。
3. .self
假设你有一个父元素和一个子元素,当你点击子元素时,你希望事件处理器只在点击父元素本身时才被触发。
<div id="parent" @click.self="logParentClick">
Parent element
<button id="child" @click="logChildClick">Click me!</button>
</div>
new Vue({
el: '#app',
methods: {
logParentClick() {
console.log('Parent clicked');
},
logChildClick() {
console.log('Child clicked');
}
}
});
在这个例子中,当你点击按钮时,只会输出 "Child clicked",而不会输出 "Parent clicked"。这是因为.self
修饰符确保事件处理器只在点击父元素本身时才被触发。
透传值
(这个我不是特别了解,所以做了案例)
子组件
<script setup>
import { defineProps } from "vue";
const props = defineProps({
buttonText: String,
customClass: String,
});
</script>
<template>
<button :class="[customClass, 'base-button']">
{{ buttonText }}
</button>
</template>
<style scoped>
.base-button {
background-color: red;
}
</style>
父组件
<script setup>
import HelloWorld from "./components/HelloWorld.vue";
</script>
<template>
<HelloWorld
:buttonText="'传递'"
:customClass="'large-button'"
></HelloWorld>
</template>
<style scoped>
.large-button {
font-size: 22px;
}
</style>
效果:
成功传递