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 不兼容。

 

以上。