站长资源网络编程

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

整理:jimmy2026/7/29浏览2
简介JS构造选项写法export defaul { data, methods, ...}JS class写法@Componentexport default class Cpn extends Vue{counter = 0 //dataadd(){ //methodsthis.counter +=

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
 }
}

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

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