vue2 系列:vue-property-decorator 用法

简介: vue2 系列:vue-property-decorator 用法

前言:vue2.0 支持 ts,需要用到 vue-property-decorator

1. 安装

npm i -D vue-property-decorator

2. 用法

// vue, compnent 必引入,其他按需引用
import { Vue, Component, Prop, PropSync, Watch, Emit } from "vue-property-decorator";
// 必须的
@Component();
export default class Demo extends Vue {
  // Prop, ! 表示非 null,非 undefined
  @Prop({ default: 18 })
  age!: number;
  // PropSync, 实现组件双向绑定,可以修改传过来的值
  @PropSync('sex', { type: String })
  syncedsex!: string;
  // data
  name: string = 'yqcoder';
  // Watch
  @Watch('name', { immediate: true, deep: true })
  onChangeName(new, old) {}
  // computed
  get nameL() {
    return this.name.length
  }
  // Emit: this.$emit('reset-name', 'yq')
  @Emit()
  resetName() {
    return 'yq'
  }
}


目录
相关文章
|
6月前
|
JavaScript
【Vue3】深入理解Vue中的ref属性
【Vue3】深入理解Vue中的ref属性
|
JavaScript 前端开发
【Vue3】vue3——setup,ref函数,reactive函数
【Vue3】vue3——setup,ref函数,reactive函数
100 0
|
22天前
|
JavaScript
Vue 中mixin 的用法
【10月更文挑战第18天】Vue 中mixin 的用法
27 3
|
4月前
|
JavaScript
Vue中data常见的写法:
Vue中data常见的写法:
|
JavaScript 前端开发
vue中mixins的使用方法和注意点
vue中mixins的使用方法和注意点
|
API
vue3 ref和reactive的用法
Vue3中的ref和reactive是Composition API中的两个基本函数。
559 0
Vue3 globalProperties 的使用(代替 Vue.prototype.$xxx)
Vue3 globalProperties 的使用(代替 Vue.prototype.$xxx)
249 0
|
JavaScript
Vue 的 class 组件介绍(vue-property-decorator)
Vue 的 class 组件介绍(vue-property-decorator)
201 0
|
缓存 JavaScript
Vue3中computed的用法
Vue3中computed的用法
165 0