VUE+ts

最新推荐文章于 2025-11-24 17:23:13 发布

原创最新推荐文章于 2025-11-24 17:23:13 发布 · 1.4k 阅读

0 ·

CC 4.0 BY-SA版权

先简单的总结一下ts

接口规范数据类型的（规范对象函数类等是什么类型）

泛型有时候数据类型不确定（通常是因为返回的类型）需要泛型来对不同的地方返回不同的类型

装饰器他就是一个函数用来改变下面的函数类等

@lang 与@lang() 这两种都是装饰器但是第二种会传参针对装饰器的不同传递的参数功能也不同但是确实是真的传参进去了

也就是说先执行一边装饰器和下面的方法（装饰器下面的方法会作为一个参数在装饰器中被改造）

@lang 装饰器可能是这样样子的

function lang(target){}

@lang() 就是这个样子的

function lang(option?:any){

return function(){} return 必须

}

接下来看看vue中是的实际应用

两款插件 vue-class-component与vue-property-decorator

vue-class-component是vue官方的插件

而vue-property-decorator是社区的人写的插件

区别 vue-property-decorator完全基于vue-class-component但是在他基础之上又增加了

@Prop @Watch@Inject@Emit等等装饰器

所以接收父向子组件传递数据

@Component 改变类转化为vue的配置项结构同时也可以在这里引入组件

import aaa from './zujian.vue';

@Component({

components: {

aaa,

})

@Prop

@Prop({ default: false, type: Boolean }) radio!: boolean;

子组件向父组件传值

@Emit

abc(){return }

如果Emit 里面没有参数这时候会触发父组件函数名的事件也就是abc 但是如果是驼峰式命名getAbc 事件名会成为get-abc

参数是函数的返回值

@Watch() 参数监听那个变量

执行方法也有两个参数 newVal 与oldval

<template>
  <div class="hello">
    <input type="text" v-model="attrbution" />
    <input type="text" v-model="nn" />
    <ul @click="danji('dd')">
      <li>你好</li>
    </ul>
    <aaa></aaa>
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
import axios from 'axios';
import aaa from './zujian.vue';
@Component({
  components: {
    aaa,
  },
})
export default class HelloWorld extends Vue {
  @Prop() private msg!: string;
  private nn: string;
  private attrbution: string[] = ['w', 'y'];
  // private danji(e: any): void {}
  private get name(): string {
    return '小茗';
  }
  constructor() {
    super();
    this.nn = 'dadaq';
  }
  // private set name(d:string){
  //   console.log(111)
  //   console.log(d)
  //   this.name=d
  // }
  @Watch('nn')
  public aa(new1: any, old: any) {
    console.log(new1, old);
    console.log(this.nn);
  }
  private mounted(): void {
    this.attrbution = ['nihao'];
  }
}
</script>

需要注意的是这时候引入组件有时要加上.vue否则会说找不到module

有时候会说ts文件才可以写private 全删了再重新写一遍（没改什么感觉是vscode 卡住了似的）