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

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" />

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

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>

生命周期事件 可以在生命周期钩子中执行操作,如 onMountedonUpdated

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 中常见的事件触发与数据绑定场景,可根据具体需求选择合适的方式。

相关推荐
Zyx20077 小时前
HTML5 敲击乐(2):从静态页面到移动端适配的完整实践
前端
有意义7 小时前
从HTML敲击乐了解开发流程
javascript
烟袅7 小时前
JavaScript 中的 null 与 undefined:你真的搞懂它们的区别了吗?
javascript
有点笨的蛋7 小时前
“花”点心思学代理:JavaScript中的对象与中介艺术
javascript
今禾7 小时前
流式输出深度解析:从应用层到传输层的完整技术剖析
前端·http·面试
Hilaku7 小时前
一个函数超过20行? 聊聊我的函数式代码洁癖
前端·javascript·架构
白兰地空瓶7 小时前
# 从对象字面量到前端三剑客:JavaScript 为何是最具表现力的脚本语言?
前端
不会算法的小灰7 小时前
JavaScript 核心知识学习笔记:给Java开发者的实战指南
javascript·笔记·学习
vivo互联网技术7 小时前
vivo 前端三剑客发展历程及原理揭秘
前端