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

(编辑：jimmy 日期: 2025/1/8 浏览：2)

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循环的用法详解