vue+ts装饰器的使用

vue-class-component 是官方出品的

主要提供了Vue,Component，Mixin等的使用

vue-property-decorator 社区出品

深度依赖vue-class-component，拓展出了

• @Prop @Model @Emit @Inject @Provide @Watch

各个装饰器的使用

• @Component

@Component({
    components: {
        testCom
    }
})

• @Prop 父子间的传值

@Prop({type: String, default: 'ss'}) name: string

• @Watch监听

@Watch('name')
nameChange(){
    
}

vuex-module-decorators 再ts项目中使用vuex借助这个装饰器

import {
  VuexModule,
  Module,
  Action,
  Mutation,
  getModule
} from "vuex-module-decorators";

• @Module @Mutation的使用

export interface IUserState {
  roles: string[];
  user: IUserDto | null;
  token: string;
}

// dynamic: true 动态加载，使用到的时候再加载
// store实例
@Module({ dynamic: true, store, name: "user" }) 
class User extends VuexModule implements IUserState {
  // 相当于state中的数据
  public roles: string[] = [];
  public user: IUserDto | null = null;
  public token: string = localStorage.getItem(WMS_TOKEN) || "";

  @Mutation
  private SetToken(token: string) {
    this.token = token;
    localStorage.setItem(WMS_TOKEN, token);
  }
  export const UserModule = getModule(User);

• 使用UserModule

import { UserModule } from "@/store/modules/user";
UserModule.*

action state都是通过UserModule.*调用

• mixins的使用
  • 通过vue-class-component

  import { mixins } from "vue-class-component";
  export default class extends mixins(ResizeMixin) {}
  

  • 直接写extends也可以

  export default class extends ResizeMixin{}
  

  • 在@Component中混入

  import { mixins } from "vue-class-component";
  @Component({
      mixins: [ResizeMixin]
  })
  

• @Emit 在函数上添加@Emit，执行完函数后就会触发事件

@Emit('reset')

• @Model的使用 v-model方式自定义组件

<IconSelect ref="iconSelect" v-model="form.icon" />

@Model("input") private value: string; // 指定input事件
this.$emit("input", name); // 将name值赋值给input框
this.$emit("input", '');

参考链接

www.jianshu.com/p/d8ed3aa76…