Vue3学习日记（day5）

本文主要是介绍Vue3学习日记（day5），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

接下来我们继续探讨文档

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>

效果：