当第一次打开vue3代码看到vue-property-decorator的时候是一脸懵逼,这都什么呀,后来经过了解才发现这种写法简单多了。
当我们在vue单文件中使用TypeScript时,引入vue-property-decorator之后,script中的标签就变为这样:
<script lang="ts">
import {Vue, Component} from 'vue-property-decorator';
@Component({})
export default class App extends Vue{
ValA: string = "英雄";
ValB: number = 1;
}
</script>
等同于
<script lang="es6">
import Vue from 'vue';
export default {
name: "App",
data(){
return {
ValA: '英雄',
ValB: 1
}
}
}
</script>
使用了和以往不同的写法,使用了es6的类的写法,至于为何可以使用这种写法就是因为这个组件是完全依赖于vue-class-component
在类中声明的变量其实和data中声明的是一样的,都是有双向绑定的;也就是例子中的ValA和ValB有了类型指定同时能双向绑定
现在来说一说vue-property-decorator组件的属性
@Prop
在使用Vue时有时会遇到子组件接收父组件传递来的参数.我们需要定义Prop属性。
export default {
props: {
propNum: {
type: Number
},
propStr: {
default: 'default value'
},
propArr: {
type: [String, Boolean]
},
}
}
利用@prop装饰器的方法改造如下:
<script lang="ts">
import {Vue, Component, Prop} from 'vue-property-decorator';
@Component({})
export default class "组件名" extends Vue{
@Prop(Number) propNum!: number;
@Prop({default: 'default value'}) propStr!: string;
@propC([String, Boolean]) propArr: string | boolean;
}
</script>
@Prop装饰器同vue中props功能相同,接收一个参数,这个参数可以有三种写法:
Constructor:例如String,Number,Boolean等,指定 prop 的类型;
Constructor[]:指定 prop 的可选类型;
PropOptions:可以使用以下选项:type,default,required,validator。
需要注意的是:属性的ts类型后面需要加上undefined类型;或者在属性名后面加上!,表示非null 和 非undefined 的断言,否则编译器会给出错误提示。
@Watch
监听的是页面数据的变化比如说当值发生改变的时候触发的函数
可以利用vue-property-decorator提供的@Watch装饰器来替换Vue中的watch属性,以此来监听值的变化。请看下面例子:
export default{
name: "App",
watch: {
'userName': this.onChangeValue,/*child的一旦发生改变就会触发*/
'userInfo': {
handler: 'onChangeValue',
immediate: true,
deep: true
}
},
methods: {
onChangeValue(newVal, oldVal){
// todo...
}
}
}
使用@watch修改为:
<script lang="ts">
import {Vue, Component, Watch} from 'vue-property-decorator';
@Component({})
export default class App extends Vue{
@watch('userName')/*child的一旦发生改变就会触发onchangeValue*/
onchangeValue(newVal: string, oldVal: string){
//todo...
}
@Watch('userInfo', {immediate: true, deep: true})
onChangeValue(newVal: Person, oldVal: Person){
// todo...
}
}
</script>
@watch()有两参数,第一个参数是监听的值,第二个参数是所装饰的函数即监听到属性变化之后的操作.比如deep:true就是表示深度监听。
注意用@watch只会监听到它下面的一个方法,如果有多个监听要写多个Watch。
@Emit
主要用于事件监听与触发,熟悉Vue的小伙伴都知道Vue提供了两个函数emit和on,主要用于兄弟组件之间传值:
<script lang="es6">
import Vue from 'vue';
export default {
name: "App",
mounted(){
this.$on('emit-change', function(n) {
console.log(n)
})
this.emitChange('王者归来');
},
methods: {
emitChange(n){
console.log('你以为是在拍电影吗');
/*$emit就是触发emitChange事件,并且把n值传递到$on中,on中对n值进行操作*/
this.$emit('emit-change', n);
}
}
}
</script>
使用@emit修改为:
<script lang="ts">
import {Vue, Component, Emit} from 'vue-property-decorator';
@Component()
export default class App extends Vue{
mounted(){
this.$on('emit-change', function(n) {
console.log(n)
})
/*$on就是监听emit-change事件,并且对emit-change得到的值进行一个操作*/
this.emitChange('王者归来');
}
@Emit()
emitChange(n: string){
console.log('你以为是在拍电影吗');
}
}
</script>
@Emit()其实就是把$emit给写入它装饰的类中,这样就省去了对事件的触发操作。只要在@Emit()中传入要触发的事件名@Emit('emit-change')
@Component
是 vue-class-component 中的装饰器修饰组件,用来为组件类添加各种“装饰属性”
简单的说,就是框架负责为类额外添加一些成员和功能,而开发者负责通过 注解 的方式 将数据传给框架,框架收到 注解 传入的数据后,可以用在类上。
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import ItemList from './ItemListA.vue'
import ItemList from './ItemListB.vue'
import ItemList from './ItemListC.vue'
@Component({
components: {
ItemListA,
ItemListB,
ItemListC
},
})
export default class App extends Vue {
}
</script>
我们可以看到@component中传的是一个对象,对象中可以有多个属性,这里写入了 components属性;这个属性是被注入到了Vue框架中,然后通过类继承的方式把Vue中的值给到App类,从而App就有了装饰器里的属性,同样的这样的好处是Vue有了这些属性后以后的类只要继承了Vue就有了对应的属性。
@Model()
在组件上自定义v-model语法糖,接收两个参数event: string事件名,options同@Prop的参数
@Model('change', {type: string}) readonly name!: string;
默认情况下,一个组件上的v-model 会把 value用作 prop且把 input用作 event,但是一些输入类型比如单选框和复选框按钮可能想使用 value prop来达到不同的目的。使用model选项可以回避这些情况产生的冲突。
下面是Vue官网的例子
Vue.component('my-checkbox', {
model: {
prop: 'checked',
event: 'change'
},
props: {
// this allows using the `value` prop for a different purpose
value: String,
// use `checked` as the prop which take the place of `value`
checked: {
type: Number,
default: 0
}
},
// ...
})
<my-checkbox v-model="foo" value="some value"></my-checkbox>
上述代码相当于:
<my-checkbox
:checked="foo"
@change="val => { foo = val }"
value="some value">
</my-checkbox>
即foo双向绑定的是组件的checked, 触发双向绑定数值的事件是change
使用vue-property-decorator提供的@Model改造上面的例子.
import { Vue, Component, Model} from 'vue-property-decorator';
@Component
export class myCheck extends Vue{
@Model ('change', {type: Boolean}) checked!: boolean;
}
@Mixins
在使用Vue进行开发时我们经常要用到混合,结合TypeScript之后我们有两种mixins的方法.
一种是vue-class-component提供的.
//定义要混合的类 mixins.ts
import Vue from 'vue';
import Component from 'vue-class-component';
@Component // 一定要用Component修饰
export default class myMixins extends Vue {
value: string = "Hello"
}
// 引入
import Component {mixins} from 'vue-class-component';
import myMixins from 'mixins.ts';
@Component
export class myComponent extends mixins(myMixins) {
// 直接extends myMinxins 也可以正常运行
created(){
console.log(this.value) // => Hello
}
}
第二种方式是在@Component中混入.
我们改造一下mixins.ts,定义vue/type/vue模块,实现Vue接口
// mixins.ts
import { Vue, Component } from 'vue-property-decorator';
declare module 'vue/types/vue' {
interface Vue {
value: string;
}
}
@Component
export default class myMixins extends Vue {
value: string = 'Hello'
}
import { Vue, Component, Prop } from 'vue-property-decorator';
import myMixins from '@static/js/mixins';
@Component({
mixins: [myMixins]
})
export default class myComponent extends Vue{
created(){
console.log(this.value) // => Hello
}
}
总结: 两种方式不同的是在定义mixins时如果没有定义vue/type/vue模块, 那么在混入的时候就要继承该mixins; 如果定义vue/type/vue模块,在混入时可以在@Component中mixins直接混入.