2. 装饰器

ES7语法

tsc --init // 生成一个tsconfig.json文件

// 在vscode中使用es7的新语法decorator会报错
// tsconfig.json
"experimentalDecorators": true   // 文件就不会报错了

1. 类装饰器 在不修改类的前提下，对类拓展（添加属性，添加方法）

function logClass(params:any){
    console.log("any")
    console.log(params)
    params.prototype.skill="js"
}
@logClass
class Student{
}
// 类装饰器 在不修改类的前提下，对类拓展（添加属性，添加方法）
var s:any=new Student()
console.log(s.skill)

2. Provide 属性装饰器 等同于之前的data

<div id="app">
   {{list}}
   <!-- 父组件传值给子组件 -->
   <Hello  :data="child"></Hello>
</div>
<script lang="ts">
  import { Vue,Provide} from 'vue-property-decorator';
  export default class App extends Vue {
  // Provide 属性装饰器 等同于之前的data
  @Provide() list:string = "list"
  @Provide() child:string = "child"
  mounted():void {
    console.log("mounted")
  }
}
</script>

3. prop 方法装饰器

<script lang="ts">
    import { Component, Vue,Prop} from 'vue-property-decorator';
    @Component
    // Hello 为组件名
    export default class Hello extends Vue {
        // Prop 方法装饰器
         # // ! 表示这个数据是一定要传递的
        @Prop() data!:string
    }
</script>