详解Vue 单文件组件的三种写法

(编辑：jimmy 日期: 2025/1/11 浏览：3 次 )

JS构造选项写法

export defaul { data, methods, ...}

JS class写法

@Component
export default class Cpn extends Vue{
 counter = 0 //data
 add(){ //methods
  this.counter += 1
 }
}

TS class写法

@Component
export default class Cpn extends Vue{
 @Prop(Number) sum : number | undefined; 
 counter = 0; //data
 add(){ //methods
  this.counter += 1
 }
}

优先推荐第一种写法和第三种

第一种更简洁
第三种更严谨

上一篇：Vue组件模板的几种书写形式(3种)
下一篇：vue中 v-for循环的用法详解