Vue 3 + TypeScript 事件触发与数据绑定方法

事件绑定与触发 Vue 3 提供了多种方式绑定和触发事件，可以通过模板直接绑定或使用 setup 语法糖。

html 复制代码

<template>
  <button @click="handleClick">点击事件</button>
  <input @input="handleInput" v-model="inputValue" />
</template>

<script lang="ts" setup>
const handleClick = (event: MouseEvent) => {
  console.log('按钮被点击', event);
};

const inputValue = ref('');
const handleInput = (event: Event) => {
  console.log('输入值变化', inputValue.value);
};
</script>

自定义事件 子组件可以通过 defineEmits 定义并触发自定义事件，父组件监听这些事件。

html 复制代码

<!-- 子组件 ChildComponent.vue -->
<script lang="ts" setup>
const emits = defineEmits(['customEvent']);
const triggerEvent = () => {
  emits('customEvent', '传递的数据');
};
</script>

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

获取页面绑定数据 使用 ref 或 reactive 创建响应式数据，并通过模板或逻辑代码访问。

html 复制代码

<script lang="ts" setup>
const count = ref(0);
const state = reactive({ name: 'Vue 3' });

const updateData = () => {
  count.value++;
  state.name = 'Updated';
};
</script>

表单输入绑定 使用 v-model 实现双向数据绑定，支持多种表单元素。

html 复制代码

<input v-model="text" type="text" />
<textarea v-model="message"></textarea>
<select v-model="selected">
  <option value="A">A</option>
</select>

事件修饰符 Vue 提供了事件修饰符简化常见操作，如阻止默认行为或停止冒泡。

html 复制代码

<form @submit.prevent="onSubmit"></form>
<a @click.stop="doThis"></a>

生命周期事件 可以在生命周期钩子中执行操作，如 onMounted 或 onUpdated。

typescript 复制代码

import { onMounted } from 'vue';

onMounted(() => {
  console.log('组件已挂载');
});

键盘与鼠标事件 监听特定按键或鼠标事件，使用修饰符或手动检查键值。

html 复制代码

<input @keyup.enter="submit" />
<button @click.middle="middleClick">中键点击</button>

TS 类型定义 为事件处理函数和响应式数据提供类型注解，确保类型安全。

typescript 复制代码

interface User {
  name: string;
  age: number;
}

const user = reactive<User>({ name: '', age: 0 });
const handleEvent = (payload: User) => {
  console.log(payload.name);
};

以上方法涵盖了 Vue 3 和 TypeScript 中常见的事件触发与数据绑定场景，可根据具体需求选择合适的方式。