TypeScript+Vue 插件 vue-class-component的使用總結

首先 下載

npm install vue-class-component vue-property-decorator --save-dev

一梭子直接幹；

其次，咱來說說它們的區別與聯繫：

vue-property-decorator社區出品；vue-class-component官方出品

vue-class-component提供了Vue、Component等；

vue-property-decorator深度依賴了vue-class-component，拓展出了更多操作符：@Prop、@Emit、@Inject、@Model、@Provide、@Watch；

開發時正常引入vue-property-decorator就行

引入後寫vue代碼就是如此，

import {Component, Prop, Vue} from 'vue-property-decorator'

@Component
export default class App extends Vue {
  name:string = 'Simon Zhang'

  // computed
  get MyName():string {
    return `My name is ${this.name}`
  }

  // methods
  sayHello():void {
    alert(`Hello ${this.name}`)
  }

  mounted() {
    this.sayHello();
  }
}

相當於

export default {
  data () {
    return {
      name: 'Simon Zhang'
    }
  },

  mounted () {
    this.sayHello()
  },

  computed: {
    MyName() {
      return `My name is ${this.name}`
    }
  },

  methods: {
    sayHello() {
      alert(`Hello ${this.name}`)
    },
  }
}

大佬都說爽的一批；

然鵝菜鳥我遇到問題一堆，以下做個積累總結：

1、寫法問題：引入組件和接收父組件傳過來的參數

@Component({
  components: {
    XXXX
  },
  props: {
    mapFlag: Number
  }
})

 

 

 

 

此文長期慢慢累積