Vue3+ts项目练习一

最新推荐文章于 2025-02-27 17:07:26 发布

xvzhengyang

最新推荐文章于 2025-02-27 17:07:26 发布

阅读量349

点赞数 1

CC 4.0 BY-SA版权

分类专栏： TypeScript 文章标签： vue.js 前端 typescript

本文链接：https://blog.youkuaiyun.com/xvzhengyang/article/details/139143827

TypeScript 专栏收录该内容

10 篇文章 ¥9.90 ¥99.00

订阅专栏

超级会员免费看

本文介绍在Vue3项目中结合TypeScript如何新增一个名为'Demo'的路由，通过阅读，你将了解到如何编写demo.tsx文件来实现这一功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

// myComponent.tsx
import { defineComponent } from "vue";
// 在TSX组件的setup函数中，你可以这样使用Vue Router
import { useRouter } from "vue-router";
// 本地响应式数据变量使用
import { ref } from "vue";
import { reactive } from "vue";
import { useMainStore } from "@/pinia";
import { onMounted,onUnmounted } from "vue";
interface Props {
  message: string;
}
// 导入defineComponent: 从'vue'导入defineComponent函数，它是创建Vue组件的基础

// Props接口定义: 在组件外定义一个接口Props来明确组件接受的属性及其类型

// setup函数: Vue3引入的Composition API的核心，用于组件逻辑的初始化。在这里，你可以定义响应式数据、计算属性、方法等。

// 返回 JSX: setup函数返回一个JSX元素，描述了组件的模板结构。你可以直接使用TypeScript变量和函数，
// 并且得益于TSX，所有属性和事件都有静态类型检查。
const MyComponent = defineComponent({
  props: {
    message: {
      type: String,
      required: true,
      default: "Hello, World!",
    },
  },
  se