当前位置 主页 > 服务器问题 > Linux/apache问题 >
我们只需要给装饰器@Emit传递一个事件名参数reset,这样函数emitTodo运行之后就会触发reset事件.
总结:在Vue中我们是使用$emit触发事件,使用vue-property-decorator时,可以借助@Emit装饰器来实现.@Emit修饰的函数所接受的参数会在运行之后触发事件的时候传递过去.
@Emit触发事件有两种写法
@Emit()不传参数,那么它触发的事件名就是它所修饰的函数名. @Emit(name: string),里面传递一个字符串,该字符串为要触发的事件名.@Watch
我们可以利用vue-property-decorator提供的@Watch装饰器来替换Vue中的watch属性,以此来监听值的变化.
在Vue中监听器的使用如下:
export default{ watch: { 'child': this.onChangeValue // 这种写法默认 `immediate`和`deep`为`false` , 'person': { handler: 'onChangeValue', immediate: true, deep: true } }, methods: { onChangeValue(newVal, oldVal){ // todo... } } }
那么我们如何使用@Watch装饰器来改造它呢?
import {Vue, Component, Watch} from 'vue-property-decorator'; @Watch('child') onChangeValue(newVal: string, oldVal: string){ // todo... } @Watch('person', {immediate: true, deep: true}) onChangeValue(newVal: Person, oldVal: Person){ // todo... }
总结: @Watch使用非常简单,接受第一个参数为要监听的属性名 第二个属性为可选对象.@Watch所装饰的函数即监听到属性变化之后的操作.
@Prop
我们在使用Vue时有时会遇到子组件接收父组件传递来的参数.我们需要定义Prop属性.
比如子组件从父组件接收三个属性propA,propB,propC.
propA类型为Number propB默认值为default value propC类型为String或者Booleanexport default { props: { propA: { type: Number }, propB: { default: 'default value' }, propC: { type: [String, Boolean] }, } }
我们使用vue-property-decorator提供的@Prop可以将上面的代码改造为如下:
<script lang="ts"> import {Vue, Component, Prop} from 'vue-property-decorator'; @Component({}) export default class "组件名" extends Vue{ @Prop(Number) propA!: number; @Prop({default: 'default value'}) propB!: string; @propC([String, Boolean]) propC: string | boolean; } </script>
这里 !和可选参数?是相反的, !告诉TypeScript我这里一定有值.
总结: @Prop接受一个参数可以是类型变量或者对象或者数组.@Prop接受的类型比如Number是JavaScript的类型,之后定义的属性类型则是TypeScript的类型.
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 } }