Vue Class Component使用一

一、模板定义

import Vue from 'vue'
import Component from 'vue-class-component'

// HelloWorld class will be a Vue component
@Component
export default class HelloWorld extends Vue {}

二、data数据

import Vue from 'vue'
import Component from 'vue-class-component'
@Component
export default class HelloWorld extends Vue {
  // 请避免使用undefined作为初始值，class属性不具有反应性（检测能力）
  notReativeMsg = undefined; // will not be reactive value
  // 可以使用null、data hook形式
  reativeMsg = null; // will be reactive value
  message = 'hello world'
    data(){
      return {
        msg: '你好', // data hook
      }
    }
}

三、methods方法

import { CreateElement } from 'vue'
import { Component, Vue } from 'vue-property-decorator'
// import Vue from 'vue'
// import Component from 'vue-class-component'
@Component
export default class HelloWorld extends Vue {
  count = 0
  // 组件methods可以定义为类原型方法
  private subFn(){
    this.count--
    this.obj.count--
  }
  data(){
  	return {
      // 私有方法封装
      obj:{
        count: 0,
        addFn:()=>{
          this.count++
          this.obj.count++
        }
      }
    }
  }
  private render(h: CreateElement) {
    return (
      <div class="main">
        <h1>{this.count}</h1>
        <h1>{this.obj.count}</h1>
        <a-button onclick={this.obj.addFn}>减一</a-button>
        <a-button onclick={this.subFn}>加一</a-button>
      </div>
    )
  }
}

三、computed计算属性

可以将计算属性声明为类属性 getter / setter
@Component
export default class HelloWorld extends Vue {
  firstName = 'Hello'
  lastName = ',world!'
  get name(){
    return this.firstName + this.lastName
  }
  set name(value){
    const splitted = value.split(' ')
    this.firstName = splitted[0]
    this.lastName = splitted[1] || ''
  }
}

四、hooks钩子

// data，render和所有的Vue生命周期钩子，可直接声明为类原型的方法，但你不能调用它们的实例本身。声明自定义方法时，应避免使用这些保留名称。
@Component
export default class HelloWorld extends Vue {
  beforeCreate(){}
  created(){}
  beforeMounte(){}
  mounted(){}
  data(){}
  render(){}
}

五、@Component其它配置项

@Component({
  componets:{},
  ......
})

六、props传递

// 定义props
const GreetingProps = Vue.extend({
  props: {
    name: String
  }
})
// 类组件中使用props
@Component
export defalut class HelloWorld extends GreetingProps{}

// 如果您要扩展一个超类组件或mixin，请使用mixins将定义的prop与它们组合
@Component
export default class HelloWorld extends mixins(GreetingProps, Super) {
  get message(): string {
    // this.name will be typed
    return 'Hello, ' + this.name
  }
}