vue : 对 vue-class-component 的个人理解

Z时代
2024-01-10
分类：综合

vue

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>