Vue-property-decorator

简介

vue-class-component 是官方推出的vue对typescript支持的装饰器(库)，可以将Vue中的组件用类的方式编写。vue-property-decoretor即vue属性装饰器，这个库完全依赖于vue-class-component。在vue中使用typescript，通过装饰器来简化书写。

在使用前需要进行安装：

npm i -S vue-property-decorator

属性

@Component声明组件

@Component 装饰器可以接收一个对象作为参数，可以在对象中声明 components，filters，directives等未提供装饰器的选项。

例如：

TS写法：

<script lang="ts">
	import {Component,Vue} from 'vue-property-decorator';
	import {componentA,componentB} from '@/components'
	
	@Component({
		components:{
			componentA,
			componentB,
		}
	})
	export default class MyComponent extends Vue{}
</script>

相当于：

<script>
	import {componentA,componentB} from '@/components';
	export default{
		components:{
			componentA,
			componentB
		}
	}
</script>

定义变量

import {Component,Vue} from 'vue-property-decorator';
export default class MyComponent extends Vue{
	private data1 : string = '123';
	private data2 : number = 1;
}

相当于：

export default {
	data(){
		return {
			data1:'123',
			data2:1
		}
	}
}

@Prop

@Prop(options (PropOptions | Constructor[] | Constructor) = {})

@Prop 装饰器接收一个参数，这个参数可以有三种写法。

• PropOptions，可以使用type,default,reauired等。
• Constructor[]，可以指定prop的可选类型。
• Constructor，可以指定prop的类型，例如String，Number，Boolean等。

import {Vue,Component,Prop} from 'vue-property-decorator';

@Component
export default calss MyComponent extends Vue{
	@Prop(Number) PropA:number
	@Prop([String,Number]) propB:String|number
	@prop({
		type:String,
		default:'a'
	}) propC!:string
}

!表示告诉typescript这里一定是有值的；？表示可选。

相当于：

export default{
	props:{
		propA:{
			type:Number
		},
		propB:{
			type:[String,Number]
		},
		propC:{
			type:String,
			default:'a'
		}
	}
}

生命周期钩子函数

@Component
export default class MyComponent extends Vue {
	private created(){
		this.show()
	}
}

方法

Vue的类组件写法中，将事件方法直接定义，不用写在methods中。

import {Vue,Component,Prop} from 'vue-property-decorator';

@Component
export default class MyComponent extends Vue{
	private show(){
		console.log('showme')
	}
}

相当于：

export default {
  name: "MyComponent",
  data(){        //组件中的 data 必须是函数
    return {}
  },
  methods:{     //事件处理函数
    show(){
     	console.log('showme')
    }
  }

@Emit

定义emit事件(组件之间通信)，参数字符串表示分发的事件名，如果没有，则方法名作为分发事件名。

@Emit()不传参数，那么它出发的事件名就是它所修饰的函数名。
@Emit(name: string),里面传递一个字符串，则该字符串为要触发的事件名。

TS写法：

import {Vue,Component,Emit} from 'vue-property-decorator';

@Component
export default class MyComponent extends Vue {
	private count=0;
	@Emit()
	addCount(n: number) {
		this.count += n;
	}
	@Emit('reset')
	resetCount(){
		this.count=0
	}
	@Emit()
	returnValue() {
		return 10;
	}
	@Emit()
	promise(){
		return new Promise((resolve)=>{
			setTimeout(()=>{
				reslove(20)
			},0)
		})
	}
}

相当于：

export default {
	data() {
		return {
			count: 0,
		}
	},
	methods: {
		addCount(n) {
			this.count += n
			this.$emit('add-count',n)
		},
		resetCount() {
			this.count = 0;
			this.$emit('reset')
		},
		returnValue() {
			this.$emit('return-value',10)
		},
		promise() {
			const promise = new Promise((resolve)=>{
				setTimeout(()=>{
					resolve(20)
				},0)
			})
			promise.then((value)=>{
				this.$emit('promise',value)
			})
		}
	}
}

计算属性

Vue的类组件写法中，我们只需要将计算属性定义为一个函数，使用gettter，在计算属性名前面加上get关键字就可以了。

<script lang="ts">
  import {Vue, Component} from 'vue-property-decorator';
 
  @Component
  export default class MyComponent extends Vue{
    get Countadd() {
      return count++;
    }
  }
</script>

相当于：

<script>
  import Vue from 'vue';
 
  export default {
    computed: {
      Countadd: function() {
        return 1;
      }
    }
  }
</script>

Mixins

Mixins混合由vue类组件vue-class-component提供。

Hello组件：

import {Vue, Component} from 'vue-property-decorator';
 
  @Component
  export default class Hello extends Vue{
    hello = 'hello';
  }
</script>

World组件：

import {Vue, Component} from 'vue-property-decorator';
 
  @Component
  export default class World extends Vue{
    world = 'world';
  }
</script>

Mixins混合：

import {Component, Mixins} from 'vue-property-decorator';
import Hello from './Hello.vue';
import World from './World.vue';

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