vue3+ts

vue3+ts

1、定义接口

interface User {
  username：string,
  age:number,
  sertUsername(username:string):void,
  getUsername():string
 }

实现接口的第一种写法

export default defineCompoenent({
 setup() {
  let user:User = reactive({
   username:'张三',
   age:"20",
   setUsername(username:string){
    this.username = username
   },
   getUsername() {
    return this.username
   }
  })
  return {
  ...toRefs(user)
  }
 }
})

实现接口的第二种写法

export default defineCompoenent({
 setup() {
  let user = reactive<User>({
   username:'张三',
   age:"20",
   setUsername(username:string){
    this.username = username
   },
   getUsername() {
    return this.username
   }
  })
  return {
  ...toRefs(user)
  }
 }
})

实现接口的第三种方法

export default defineCompoenent({
 setup() {
  let user = reactive({
   username:'张三',
   age:"20",
   setUsername(username:string){
    this.username = username
   },
   getUsername() {
    return this.username
   }
  }) as User
  //使用ref的时候，如何指定传入数据的类型
  let count = ref<Number | string>('20')
  //使用计算属性的时候
  let reverseUsername = computed(():string=>{
   return user.username.split('').reverse().join('')
  })
  return {
  ...toRefs(user),
  count
  }
 }
})

2、动态路由

（1）在路由配置里面需要用:进行指明

{path:'/newContent/:aid',component:NewContent}

（2）路由跳转

<router-link to="/newContent/12" ></router-link>

（3）获取路由

this.$route.params

3、get传值

<router-link to="/newContent?id = 12" ></router-link>
//获取传递过来的值
this.$route.query