五、手把手教你 Vue2+Ts

Vue2+Ts

注意这里改为引用 vue-property-decorator 不是vue-class-component

盛年不重来

watch:

1. 引入 Watch

import {Watch} from 'vue-property-decorator'

2. 方法添加注解

@Watch(path: string, options: WatchOptions = {})

options 包含两个属性

• immediate?:boolean 侦听开始之后是否立即调用该回调函数
• deep?:boolean 被侦听的对象的属性被改变时，是否调用该回调函数

<template>
    <div class="about">
        {{count}}
        <button @click="addCount">addCount</button>
    </div>
</template>

<script lang="ts">
import {Vue, Component, Watch} from 'vue-property-decorator'

@Component
export default class HelloWorld extends Vue {
    count = 0;

    addCount() {
        this.count++;
    }

    // @Watch('count', {deep: true, immediate: true})
    @Watch('count')
    countWatch(nv: number, ov: number) {
        console.log(nv, ov);
    }

}
</script>

一日难再晨

Props：

1. 引入 prop

import {Prop} from 'vue-property-decorator'

2. 方法添加注解

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

• PropOptions，可以使用以下选项：type，default，required，validator
• Constructor[]，指定 prop 的可选类型
• Constructor，例如 String，Number，Boolean 等，指定 prop 的类型

<template>
    <div class="about">
        {{name}}
    </div>
</template>

<script lang="ts">
import {Vue, Component, Prop} from 'vue-property-decorator'

@Component
export default class HelloWorld extends Vue {
    @Prop({type: String, required: false, default: '张三'})
        // @Prop({default: '张三'})
        // @Prop(Number)
    name: string;
}
</script>

组件不传递name:

组件传递name:

及时当勉励

Emit:

1. 引入 Emit

import {Emit} from 'vue-property-decorator'

2. 方法添加注解

@Emit(event?: string): (_target: Vue, propertyKey: string, descriptor: any) => void

• @Emit 装饰器接收一个可选参数，该参数是[公式]Emit 会将回调函数名的 camelCase 转为 kebab-case，并将其作为事件名

• @Emit 会将回调函数的返回值作为第二个参数，如果返回值是一个 Promise 对象，$emit 会在 Promise 对象被标记为 resolved 之后触发

• @Emit 的回调函数的参数，会放在其返回值之后，一起被$emit 当做参数使用

子类：

<template>
    <div class="about">
        {{count}}
        <button @click="addToCount(1)">addCount</button>
    </div>
</template>

<script lang="ts">
import {Vue, Component, Emit} from 'vue-property-decorator'

@Component
export default class HelloWorld extends Vue {
    count = 1;
 
    @Emit()
    addToCount(n: number) {
        return this.count += n
    }
}
</script>

父类：

<template>
    <div class="home">
        <About name="李四" @add-to-count="addToCount"></About>
    </div>
</template>

<script lang="ts">
import {Component, Vue} from "vue-property-decorator";
import About from "@/views/About.vue";
@Component({
    components: {
        About
    },
})
export default class Home extends Vue {
    addToCount(val:number){
        console.log(val)
    }
}
</script>

注意：


如果使用@Emit(event?: string) 没有传递事件名称,父类中事件名称会被转为小写用-连接，如例子中的 @add-to-count。
也有人不太喜欢用小写的这种,如例子中的 @add-to-count,那在子类@Emit中传递事件名,父类用传递的事件名接收。如：子类中@Emit(“addToCount”) 父类@addToCount="addToCount"

岁月不待人

Ref:

1. 引入 Ref

import {Ref} from 'vue-property-decorator'

2. 方法添加注解

@Ref(refKey?: string)模板中定义的ref键

<template>
    <div class="about">
        <button @click="addToCount" ref="button" style="width: 200px">addCount</button>
    </div>
</template>

<script lang="ts">
import {Vue, Component, Ref} from 'vue-property-decorator'

@Component
export default class HelloWorld extends Vue {

    @Ref("button") readonly button:any;
    // @Ref()  button:any;

    addToCount() {
        console.log(this.button)
    }

}
</script>