五、手把手教你 Vue2+Ts

Vue2+Ts

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

盛年不重来

watch:

  1. 引入 Watch
import {Watch} from 'vue-property-decorator'
  1. 方法添加注解

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

options 包含两个属性

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

image.png

<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>

image.png

一日难再晨

Props:

  1. 引入 prop
import {Prop} from 'vue-property-decorator'
  1. 方法添加注解

@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:

image.png
组件传递name:

image.png

及时当勉励

Emit:

  1. 引入 Emit
import {Emit} from 'vue-property-decorator'
  1. 方法添加注解

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

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

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

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

image.png

子类:

<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>

image.png

注意:


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

岁月不待人

Ref:

  1. 引入 Ref
import {Ref} from 'vue-property-decorator'
  1. 方法添加注解

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

image.png

<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>

image.png

  • 1
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值