Vue Class Component在项目中的使用

类组件

1. @component

使用@Component注解，将类转化为 vue 的组件，以下是一个示例

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


// HelloWorld class will be a Vue component
@Component
export default class HelloWorld extends Vue {}
1
2
3
4
5
6
7

2. Data属性

data属性初始化可以被声明为类的属性。

<template>
  <div>{{ message }}</div>
</template>


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


@Component
export default class HelloWorld extends Vue {
  // Declared as component data
  message = 'Hello World!'
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

需要注意的是，如果初始值是undefined，则类属性将不会是相应式的，这意味着不会检测到属性的更改：

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


@Component
export default class HelloWorld extends Vue {
  // `message` will not be reactive value
  message = undefined
}
1
2
3
4
5
6
7
8
9

为了避免这种情况，可以使用 null 对值进行初始化，或者使用 data()构造钩子函数，如下：

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


@Component
export default class HelloWorld extends Vue {
  // `message` will be reactive with `null` value
  message = null


  // See Hooks section for details about `data` hook inside class.
  data() {
    return {
      // `hello` will be reactive as it is declared via `data` hook.
      hello: undefined
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

3 Methods属性

组件方法可以直接声明为类的原型方法：

<template>
  <button v-on:click="hello">Click</button>
</template>


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


@Component
export default class HelloWorld extends Vue {
  // Declared as component method
  hello() {
    console.log('Hello World!')
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

4 Computed Properties(计算属性)

计算属性可以声明为类属性getter/setter：

<template>
  <input v-model="name">
</template>


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


@Component
export default class HelloWorld extends Vue {
  firstName = 'John'
  lastName = 'Doe'


  // Declared as computed property getter
  get name() {
    return this.firstName + ' ' + this.lastName
  }


  // Declared as computed property setter
  set name(value) {
    const splitted = value.split(' ')
    this.firstName = splitted[0]
    this.lastName = splitted[1] || ''
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

5 watch

watch是写在@component({})中的

// A.vue文件
@Component<A>({
  components: {
    SvgIconVue,
  },
  watch: {
  // 监听limit字段的变化
    limit: {
      handler(val) {
        this.actionLoading = new Array(val).fill(false)
      }
    }
  }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14

6. hooks

@Component
export default class HelloWorld extends Vue {
  // 所有Vue生命周期挂钩也可以直接声明为类原型方法，但是您不能在实例本身上调用它们。
  // 声明自定义方法时，应避免使用这些保留名称。
  mounted() {
    console.log('mounted')
  }
}

1
2
3
4
5
6
7
8
9

6. 子组件接收父组件传参

子组件A.vue文件

const AProps = Vue.extend({
  props: {
    tableData: {
      type: Array,
      default: () => []
    },
    page: {
      type: Number,
      default: 1
    },
    limit: {
      type: Number,
      default: 6
    },
    
  }
})
export default class A extends AProps {
  loading:false
  hello(){
    console.log('aa')
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

extend

Vue类组件支持继承

@Component
export default class Super extends Vue { // 父组件
  superValue = 'Hello'
}

@Component
export default class HelloWorld extends Super { // 继承
  created() {
    console.log(this.superValue) // -> Hello
  }
}

1
2
3
4
5
6
7
8
9
10
11
12

Mixins

Vue类组件提供了mixins辅助功能，以类样式方式使用mixins。通过使用mixins帮助程序，TypeScript可以推断混合类型并在组件类型上继承它们。
注意：所有mixin必须声明为类组件。

// mixins.js
import Vue from 'vue'
import Component from 'vue-class-component'

@Component
export class Hello extends Vue {
  hello = 'Hello'
}
@Component
export class World extends Vue {
  world = 'World'
}

1
2
3
4
5
6
7
8
9
10
11
12
13

import Component, { mixins } from 'vue-class-component'
import { Hello, World } from './mixins'

@Component
export class HelloWorld extends mixins(Hello, World) {
  created () {
    console.log(this.hello + ' ' + this.world + '!')
  }
}

1
2
3
4
5
6
7
8
9
10

props

Vue类组件没有提供用于props定义的专用API。但是，可以通过Vue.extend来实现。

const GreetingProps = Vue.extend({
  props: {
    name: String
  }
})

@Component
export default class Greeting extends GreetingProps {
  get message(): string {
    // this.name will be typed
    return 'Hello, ' + this.name
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14

extends 被占用了，如果想继承类组件或者混入时，可以使用mixins来实现

import Vue from 'vue'
import Component, { mixins } from 'vue-class-component'
import Super from './super'

const GreetingProps = Vue.extend({
  props: {
    name: String
  }
})

@Component
export default class Greeting extends mixins(GreetingProps, Super) {
  get message(): string {
    return 'Hello, ' + this.name
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17