TS 定义数据使用ref和ts

最新推荐文章于 2024-05-19 22:53:26 发布

前端小云儿

最新推荐文章于 2024-05-19 22:53:26 发布

阅读量697

点赞数 1

分类专栏： ts 文章标签： typescript

本文链接：https://blog.csdn.net/jieweiwujie/article/details/137006157

版权

ts 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

本文介绍了在Vue项目中，如何利用TypeScript的ref和泛型来创建和管理动态数据列表，以及如何在父子组件间方便地传递数据。通过三种写法展示了如何提高代码的可读性和灵活性。

摘要由CSDN通过智能技术生成

<script setup lang="ts">
import { ref } from 'vue'
const id1 = ref(1) //通过类型推断
const id2 = ref<number>(1) //通过泛型设置
//写法1
// const list = ref<
//   {
//     id: number
//     name: string
//     done: boolean
//   }[]
// >([
//   { id: 1, name: 'chifan1', done: false },
//   { id: 11, name: 'chifan11', done: false },
//   { id: 111, name: 'chifan111', done: true }
// ])
//写法2
// type Tlist = {
//   id: number
//   name: string
//   done: boolean
// }[]
// const list = ref<Tlist>([
//   { id: 1, name: 'chifan1', done: false },
//   { id: 11, name: 'chifan11', done: false },
//   { id: 111, name: 'chifan111', done: true }
// ])
//写法3
type Tlist = {
  id: number
  name: string
  done: boolean
}
const list = ref<Tlist[]>([
  { id: 1, name: 'chifan1', done: false },
  { id: 11, name: 'chifan11', done: false },
  { id: 111, name: 'chifan111', done: true }
])
//这样写的好处是取值比较方便 正好是定义的Tlist
let obj0: Tlist = list.value[0]
</script>
<template>
  <h1>father</h1>
  <h3>子组件传递过来的：</h3>
</template>
<style scoped></style>
ift