vue : 對 vue-class-component 的個人理解

vue-class-component 是 vue 的官方庫，作用是用類的方式編寫組件。

這種編寫方式可以讓.vue文件的js域結構更扁平，並使vue組件可以使用繼承、混入等高級特性。

簡單的示例：

ComponentA.vue

<template>
  <div>
    <p>{{ nameString }}</p> 
    <p>{{ child }}</p> 
    <button @click="comClick">button</button>
  </div>
</template>

<script>
import Vue from 'vue'
import Component from 'vue-class-component'

@Component({
  props: {
    child: String
  },
  watch:{
    
  },
  components: {
    
  }
})
export default class ComponentA extends Vue {
  // initial data
  nameString = `ComponentA`    
  
  // lifecycle hook
  mounted () {
  this.greet()
  }

  // computed
  get computedMsg () {
  return 'computed ' + this.nameString
  }

  // method
  greet () {
  console.log('greeting: ' + this.nameString)
  }

}
</script>

<style>

</style>

App.vue

<template>
  <div id="app">

    <component-a ref="a" :child="nameString" @com-click="fromChildEvent" />

  </div>
</template>

<script>
import Vue from 'vue'
import Component from 'vue-class-component'
import ComponentA from './ComponentA'

@Component({
  components: {
    'component-a': ComponentA
  }
})
export default class App extends Vue {}
</script>

<style lang="less">

</style>

開始我並不理解這種全新的寫法，心想：props watch components 寫哪兒呢？

后來知道了，寫在 @Component() 修飾器方法里。

關於js的修飾器可以參考這一篇文章。

 

=== 分割線 ===

 

那么，能不能讓這幾個被拿出來的東西也寫到里面呢？

可以的。

vue-property-decorator 是一個非官方庫，是 vue-class-component 的很好的補充。它可以讓vue的某些屬性和方法，通過修飾器的寫法讓它也寫到vue組件實例的類里面。

比如 @Prop @Watch @Emit。

我們把 ComponentA.vue 文件 App.vue文件 稍微改一下。

ComponentA.vue

<template>
  <div>
    <p>{{ nameString }}</p> 
    <p>{{ child }}</p> 
    <button @click="comClick">button</button>
  </div>
</template>

<script> import { Vue, Component, Emit } from 'vue-property-decorator'

@Component({
  props: {
    child: String
  },
  watch:{
    
  },
  components: {
    
  }
})
export default class ComponentA extends Vue {
  // initial data
  nameString = `ComponentA`  

  @Emit() comClick() { return { nameString:this.nameString } }

}
</script>

<style>

</style>

App.vue

<template>
  <div id="app">

    <component-a ref="a" :child="nameString" @com-click="fromChildEvent" />

  </div>
</template>

<script>
import Vue from 'vue'
import Component from 'vue-class-component'
import ComponentA from './ComponentA'

@Component({
  components: {
    'component-a': ComponentA
  }
})
export default class App extends Vue {
  // initial data
  nameString = `App`

  fromChildEvent (obj) { console.log(obj) alert("METHODS fromChildEvent") }

}
</script>

<style lang="less">
</style>

我們用vue-property-decorator寫了 @Emit() 。另外可能你也發現了，Vue、Component 也可以通過 vue-property-decorator 引入。

 

=== 分割線 ===

 

最后，有一個js公共修飾器庫，core-decorators。

這個庫提供了非常多的修飾器，用慣了大概可以提高開發效率。

不過需要注意：core-decorators 和 typescript 不兼容。

 

以上。