青少年编程与数学 02-006 前端开发框架VUE 13课题、事件处理

一、事件处理
- - 1. 基本事件处理
  - 2. 事件修饰符
  - 3. 子组件事件传递
  - 4. 传递事件给子组件
  - 5. 动态绑定事件处理函数
二、事件修饰符
三、阻止默认行为
- - 1. 使用`.prevent`修饰符
  - 2. 使用JavaScript的`event.preventDefault()`
  - 3. 使用HTML的`onsubmit`属性
  - 总结
四、向上更新数据
- - 1. 定义子组件并触发事件
  - 2. 在父组件中监听子组件的事件
  - 3. 使用`v-model`进行双向绑定
五、应用示例
- - 步骤 1：创建Vite项目
  - 步骤 2：安装Vue 3
  - 步骤 3：创建组件
  - 步骤 4：在App.vue中使用ParentComponent
  - 步骤 5：运行项目
  - 总结

课题摘要:本文介绍了Vue 3中事件处理的组合式API，包括基本事件处理、事件修饰符、子组件事件传递、阻止默认行为和向上更新数据。基本事件处理通过v-on或@监听DOM事件，事件修饰符如.stop、.prevent、.capture等改变事件监听器行为。子组件可以通过emit触发事件并传递数据给父组件，父组件监听这些事件并处理。阻止默认行为通常涉及防止表单提交等，可以通过.prevent修饰符或event.preventDefault()实现。向上更新数据展示了子组件如何通过自定义事件更新父组件的数据。最后，提供了一个应用示例，演示了如何在Vue 3项目中实现父子组件间的事件通信和数据更新。

一、事件处理

在Vue 3中，组合式API（Composition API）提供了一种新的方式来处理事件，使得代码更加模块化和可复用。以下是Vue 3中组合式API事件处理的一些关键点：

1. 基本事件处理

在Vue 3中，可以使用v-on指令（或其缩写@）来监听DOM事件，并在事件触发时执行特定的JavaScript代码。例如，可以定义一个方法来处理点击事件，并在模板中使用@click来绑定这个方法：

<template>
  <button @click="handleClick">Click me</button>
</template>

<script setup>
import { ref } from 'vue';

const message = ref(true);
function handleClick() {
  message.value = !message.value;
}
</script>

在这个例子中，当按钮被点击时，handleClick方法将被调用。

2. 事件修饰符

Vue 3中，事件修饰符用于修改事件监听器的行为。常用的事件修饰符包括：

.stop：阻止事件冒泡。
.prevent：阻止事件的默认行为。
.capture：使用事件捕获模式。
.self：仅在事件从自身触发时才执行。
.once：事件只触发一次。
.left、.right、.middle：分别对应鼠标左键、右键和中键事件。

例如，阻止点击事件冒泡和默认行为：

<button @click.stop.prevent="handleClick">点击我</button>

这将同时阻止事件冒泡和默认行为。

3. 子组件事件传递

在组件化开发中，子组件可以触发事件并通过emit将事件传递给父组件处理。在Vue 3中，emit的使用更为简洁，尤其是与<script setup>结合使用时：

<!-- 子组件 -->
<template>
  <button @click="sendEvent">发送事件</button>
</template>

<script setup>
const emit = defineEmits();
function sendEvent() {
  emit('customEvent', 'Hello from Child');
}
</script>

父组件可以通过v-on或@监听子组件触发的事件，并接收传递的参数：

<!-- 父组件 -->
<template>
  <ChildComponent @customEvent="handleCustomEvent" />
</template>

<script setup>
import ChildComponent from './ChildComponent.vue';
function handleCustomEvent(message) {
  console.log("接收到的消息:", message);
}
</script>

在这个例子中，@customEvent="handleCustomEvent"监听子组件触发的customEvent事件，并调用handleCustomEvent处理该事件。

4. 传递事件给子组件

有时我们希望在父组件中监听子组件的原生事件（如click），在Vue 3中，可以直接在组件中监听事件，这会自动处理绑定到最外层元素的原生事件：

<!-- 子组件 -->
<template>
  <button>子组件按钮</button>
</template>

<!-- 父组件 -->
<template>
  <ChildComponent @click="handleChildClick" />
</template>

<script setup>
import ChildComponent from './ChildComponent.vue';
function handleChildClick() {
  console.log("子组件按钮被点击");
}
</script>

在这个例子中，父组件通过@click="handleChildClick"监听子组件的click事件，无需额外的.native修饰符。

5. 动态绑定事件处理函数

在某些场景中，我们需要给组件的所有事件动态地绑定处理函数。可以通过v-on="object"的语法，将一个包含事件处理函数的对象绑定到组件上：

<template>
  <ChildComponent v-on="listeners" />
</template>

<script setup>
import { reactive } from 'vue';
import ChildComponent from './ChildComponent.vue';
const listeners = reactive({
  click: () => console.log("子组件被点击"),
  mouseover: () => console.log("鼠标移入子组件")
});
</script>

在这个例子中，v-on="listeners"会将listeners对象中的所有事件绑定到ChildComponent上。

通过这些方法，Vue 3的组合式API提供了灵活且强大的事件处理能力，使得组件间的交互更加高效和易于管理。

二、事件修饰符

Vue 3 提供了一系列的事件修饰符，这些修饰符可以用来改变事件监听器的行为，使得事件处理更加灵活和方便。以下是Vue 3中常用的事件修饰符及其详解：

.stop：阻止事件冒泡。
- 使用 .stop 修饰符可以阻止事件继续传播到父元素。这意味着，如果一个父元素和子元素都绑定了相同类型的事件监听器，当触发子元素的事件时，只会执行子元素的事件监听器，而不会触发父元素的事件监听器。
```
<div @click="outerClick">
  <button @click.stop="innerClick">Click me</button>
</div>
```
点击按钮时，只会触发 innerClick 方法，不会冒泡到外部的 div 上。
.prevent：阻止事件的默认行为。
- 使用 .prevent 修饰符可以阻止元素的默认行为，例如阻止表单提交或链接跳转。
```
<form @submit.prevent="handleSubmit">
  <button type="submit">Submit</button>
</form>
```
在这个例子中，使用 .prevent 修饰符阻止了表单的默认提交行为。
.capture：使用事件捕获模式。
- 事件捕获模式是指事件从文档根节点开始，向下传播到目标节点的过程。使用 .capture 修饰符可以在捕获阶段监听事件，而不是在冒泡阶段。
```
<div @click.capture="handleClick">Click me</div>
```
在这个例子中，handleClick 会在捕获阶段被触发。
.self：仅当事件在当前元素本身触发时才调用事件处理函数。
- 使用 .self 修饰符可以确保事件只有在目标元素上触发时才会执行处理函数，不包括子元素。
```
<div @click.self="handleClick">Click me</div>
```
只有当直接点击 div 本身时，handleClick 会被触发。
.once：事件只触发一次。
- 使用 .once 修饰符可以确保事件处理函数只被调用一次，之后事件监听器会被自动解绑。
```
<button @click.once="handleClick">Click me</button>
```
第一次点击按钮时，handleClick 会被调用，之后的点击将不再触发该事件。
.passive：指定事件监听器为被动模式。
- 使用 .passive 修饰符可以提升滚动性能，尤其是在移动设备上。它告诉浏览器你不会调用 preventDefault() 来阻止默认行为，这通常用于滚动事件监听。
```
<div @scroll.passive="handleScroll">Scroll me</div>
```
在这个例子中，handleScroll 会在滚动时被触发，且不会阻止默认的滚动行为，从而提升性能。

这些修饰符可以单独使用，也可以组合使用，以满足更复杂的事件处理需求。例如，可以同时使用 .stop 和 .prevent 修饰符来阻止事件冒泡和默认行为：

<a @click.stop.prevent="handleClick">Click me</a>

在这个例子中，点击链接时不会跳转页面，且不会冒泡到父元素。

三、阻止默认行为

防止表单提交的默认行为通常涉及到阻止表单的提交事件，这样浏览器就不会将表单数据发送到服务器。在Vue中，你可以通过几种方式来实现这一点：

1. 使用`.prevent`修饰符

在Vue中，最直接的方式是在监听submit事件时使用.prevent修饰符。这会阻止表单的默认提交行为。

<template>
  <form @submit.prevent="onSubmit">
    <!-- 表单内容 -->
    <button type="submit">Submit</button>
  </form>
</template>

<script>
export default {
  methods: {
    onSubmit(event) {
      // 处理表单提交逻辑
      console.log('Form submitted');
    }
  }
}
</script>

在这个例子中，当用户点击提交按钮时，onSubmit方法会被调用，但由于.prevent修饰符的作用，表单的默认提交行为被阻止了。

2. 使用JavaScript的`event.preventDefault()`

如果你需要在方法内部更明确地控制表单提交行为，可以在方法中调用event.preventDefault()。

<template>
  <form @submit="onSubmit">
    <!-- 表单内容 -->
    <button type="submit">Submit</button>
  </form>
</template>

<script>
export default {
  methods: {
    onSubmit(event) {
      // 阻止表单的默认提交行为
      event.preventDefault();
      // 处理表单提交逻辑
      console.log('Form submitted');
    }
  }
}
</script>

在这个例子中，onSubmit方法接收一个事件对象作为参数，通过调用event.preventDefault()来阻止表单的默认提交行为。

3. 使用HTML的`onsubmit`属性

如果你不使用Vue的事件绑定，而是直接在HTML中使用onsubmit属性，也可以在其中调用event.preventDefault()。

<form onsubmit="event.preventDefault(); onSubmit();">
  <!-- 表单内容 -->
  <button type="submit">Submit</button>
</form>

<script>
function onSubmit() {
  // 处理表单提交逻辑
  console.log('Form submitted');
}
</script>

在这个例子中，当表单提交时，onsubmit属性中的JavaScript代码会阻止默认行为，并调用onSubmit函数。

总结

使用Vue时，推荐使用第一种方法，即使用.prevent修饰符，因为它更符合Vue的响应式和组件化设计。其他方法虽然也可以实现相同的功能，但可能需要更多的代码和手动处理事件对象。

四、向上更新数据

在Vue中，子组件可以通过自定义事件来更新父组件的数据。Vue 3中，子组件可以使用emit函数来触发事件，并将数据传递给父组件。以下是如何在子组件的事件中更新父组件数据的步骤：

1. 定义子组件并触发事件

在子组件中，你需要使用defineEmits函数来定义可以触发的事件，并使用emit函数来触发这些事件。

<!-- ChildComponent.vue -->
<template>
  <button @click="updateParent">Update Parent</button>
</template>

<script setup>
import { defineEmits } from 'vue';

// 定义可以触发的事件
const emit = defineEmits(['update']);

// 触发事件并传递数据给父组件
function updateParent() {
  emit('update', 'New data from child');
}
</script>

2. 在父组件中监听子组件的事件

在父组件中，你需要监听子组件触发的事件，并在事件处理函数中更新数据。

<!-- ParentComponent.vue -->
<template>
  <div>
    <ChildComponent @update="handleUpdate" />
    <p>Parent data: {{ parentData }}</p>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import ChildComponent from './ChildComponent.vue';

// 父组件的数据
const parentData = ref('Initial data');

// 处理子组件触发的事件并更新数据
function handleUpdate(newData) {
  parentData.value = newData;
}
</script>

在这个例子中，当子组件的按钮被点击时，它会触发一个名为update的事件，并传递新的数据给父组件。父组件监听这个事件，并在handleUpdate函数中更新parentData的数据。

3. 使用`v-model`进行双向绑定

如果你需要进行双向数据绑定，可以使用Vue 3的v-model和v-model:prop修饰符。

<!-- ChildComponent.vue -->
<template>
  <input :value="value" @input="updateValue" />
</template>

<script setup>
import { defineProps, defineEmits } from 'vue';

// 定义接收的props和可以触发的事件
const props = defineProps(['value']);
const emit = defineEmits(['update:value']);

// 更新父组件的数据
function updateValue(event) {
  emit('update:value', event.target.value);
}
</script>

<!-- ParentComponent.vue -->
<template>
  <div>
    <ChildComponent v-model="parentData" />
    <p>Parent data: {{ parentData }}</p>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import ChildComponent from './ChildComponent.vue';

// 父组件的数据
const parentData = ref('Initial data');
</script>

在这个例子中，v-model会自动处理input事件，并使用update:value事件来更新父组件的parentData数据。这种方式简化了父子组件之间的数据同步。

通过这些方法，你可以在Vue 3中实现子组件事件触发时更新父组件的数据。

五、应用示例

创建一个使用Vue 3组合式API进行事件处理的项目，我们将使用Vite作为构建工具。以下是创建这个项目的步骤和代码示例。

步骤 1：创建Vite项目

首先，你需要安装Node.js和npm/yarn。然后，使用以下命令创建一个新的Vite项目：

# 使用npm
npm create vite@latest my-vue-app -- --template vue

# 或者使用yarn
yarn create vite my-vue-app --template vue

进入项目目录：

cd my-vue-app

步骤 2：安装Vue 3

确保项目使用的是Vue 3：

npm install vue@next

步骤 3：创建组件

在src目录下创建两个文件：ChildComponent.vue和ParentComponent.vue。

ChildComponent.vue:

<template>
  <button @click="notifyParent">Notify Parent</button>
</template>

<script setup>
import { defineEmits } from 'vue';

const emit = defineEmits(['updateData']);

function notifyParent() {
  emit('updateData', 'Data from ChildComponent');
}
</script>

ParentComponent.vue:

<template>
  <div>
    <child-component @updateData="handleDataUpdate" />
    <p>Messages from child: {{ messages }}</p>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import ChildComponent from './ChildComponent.vue';

const messages = ref([]);

function handleDataUpdate(data) {
  messages.value.push(data);
}
</script>

步骤 4：在App.vue中使用ParentComponent

编辑src/App.vue文件，引入并使用ParentComponent：

<template>
  <div id="app">
    <parent-component />
  </div>
</template>

<script setup>
import ParentComponent from './components/ParentComponent.vue';
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

步骤 5：运行项目

使用以下命令启动开发服务器：

npm run dev

# 或者使用yarn
yarn dev

现在，你可以在浏览器中访问http://localhost:3000来查看你的应用。点击子组件中的按钮，父组件将接收到消息并显示在页面上。

总结

这个简单的项目展示了如何在Vue 3中使用组合式API进行事件处理。子组件通过emit触发事件，父组件监听这些事件并更新其数据。这是一个基本的父子组件通信示例，可以根据需要进行扩展和修改。