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

相关推荐
带娃的IT创业者1 小时前
TypeScript + React + Ant Design 前端架构入门:搭建一个 Flask 个人博客前端
前端·react.js·typescript
二十雨辰2 小时前
vite如何处理项目中的资源
开发语言·javascript
非凡ghost2 小时前
MPC-BE视频播放器(强大视频播放器) 中文绿色版
前端·windows·音视频·软件需求
Stanford_11063 小时前
React前端框架有哪些?
前端·微信小程序·前端框架·微信公众平台·twitter·微信开放平台
洛可可白3 小时前
把 Vue2 项目“黑盒”嵌进 Vue3:qiankun 微前端实战笔记
前端·vue.js·笔记
学习同学3 小时前
从0到1制作一个go语言游戏服务器(二)web服务搭建
服务器·前端·golang
-D调定义之崽崽4 小时前
【初学】调试 MCP Server
前端·mcp
四月_h4 小时前
vue2动态实现多Y轴echarts图表,及节点点击事件
前端·javascript·vue.js·echarts
文心快码BaiduComate4 小时前
用Zulu轻松搭建国庆旅行4行诗网站
前端·javascript·后端
正义的大古5 小时前
OpenLayers地图交互 -- 章节十八:拖拽旋转和缩放交互详解
javascript·vue.js·openlayers