使用 vue-property-decorator 用法总结

Vue + TypeScript 使用 vue-property-decorator 用法总结

简介

要使vue支持ts写法，我们需要用到vue-property-decorator，这个组件完全依赖于vue-class-componet

安装 vue-property-decorator

npm install vue-property-decorator

• 安装成功之后我们新建HelloWorld.vue

<template>
  <div class="hello">
    Hello World
  </div>
</template>

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

@Component
export default class HelloWorld extends Vue {
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
</style>

配置好路由 就可以直接访问

装饰器和函数

@Component (完全继承于vue-class-component)
@Emit
@Inject
@Provice
@Prop
@Watch
@Model
Mixins (在vue-class-component中定义);
@Ref

用法

@Component

@Component(options: ComponentOptions = {}) 装饰器

// options 对象参数可以是
name: 'TsDemo',
components:{},
computed:{},
props:{},
watch: {},
filters: {},
// 等

@Emit

@Inject

@Provice

@Prop

@Watch

• @Watch(path: stirng, options: WatchOptions = {}) 装饰器

//简单使用
private num: number = 0;
@Watch('num')
numChange(newVal: number, oldVal: number) {
  console.log(newVal, oldVal)
}
private obj: Obj = {
  name: '1',
  one: {
    name: '2'
  }
}
// 深度监听
@Watch('obj', {deep: true, immediate: true})
objChange(newVal: Obj, oldVal: Obj) {
  console.log(newVal, oldVal);
}
// 监听对象中的一个属性值
@Watch('obj.name')
objNameChange(newVal: Obj, oldVal: Obj) {
  console.log(newVal, oldVal);
}

private arr: number[] = [];
@Watch('arr', {deep: true})
arrChange(newVal: number[], oldVal: number[]) {
  console.log('数组变化', newVal, oldVal);
}
// 直接通过数组索引修改，不能监听，解决办法 this.$set(array, index, value);
// this.arr[0] = Math.random() * 10;
// this.$set(this.arr, 0, Math.random() * 10)

• 小结：
  
  1、数组，改变数组的值用Vue的$set方法，改变数组的长度用数组的splice方法使数组变化变成可监听的。
  
  2、对象。如果操作的属性是对象内已经有的值，使用$watch,加上关键字deep深度监听对象，如果操作的属性是对象内没有的新属性。使用$set使对象变成可监听！

@Model

Mixins

@Ref

// - 在 vue-property-decorator 中 访问子组件方法可以使用
this.$refs.UserMessageComponent.list;
// 直接使用 this 调用，会出现以下错误
// Property 'list' does not exist on type 'Vue | Element | (Vue | Element)[]'.
// Property 'list' does not exist on type 'Vue'.

// 解决办法 第一种方式
(this as any).$refs.UserMessageComponent.list;
(this as any).$refs.UserMessageComponent.del();
// (<UserMessage>this.$refs.UserMessageComponent).del(); 子组件中属性和方法 访问权限 public
// 第二种方式
private son: any = null // 存储 this.$refs.UserMessageComponent
this.son = this.$refs.UserMessageComponent;
this.son.list;
this.son.del();

// 第三种，推荐使用 @Ref 代替

@Ref 装饰器接收一个可选择参数，用来指向元素或者子组件引用信息。如果没有提供参数，会使用装饰器后面的属性名作为参数

@Ref(refkey?: string) 参数!: 参数类型;

新建文件index.vue 和 userMessage.vue 两个文件

// userMessage.vue
<template>
  <div class="add_form">
    子组件
  </div>
</template>

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

@Component
export default class UserMessage extends Vue{
    private livePlatList = [];
    public list: string = '子组件';

    private add(): void {
        console.log('------- add -------');
    }
    publice del(): void {
        console.log('------ del -------');
    }
}
</script>

<style lang="scss" scoped>
@import "index";
</style>

新建 index.vue

// userMessage.vue
<template>
  <div class="add_form">
    父组件组件
    <UserMessage ref='UserMessageComponent'></UserMessage>
    <button @click="handleChildFun">访问子组件</button>
    <button @click="addFormFun" ref="refC">测试ref</button>
  </div>
</template>

<script lang="ts">
import {Component, Vue, Ref} from "vue-property-decorator";
import UserMessage from 'userMessage.vue';
@Component({
    components: {
        UserMessage
    }
})
export default class Index extends Vue{
    // @Ref(refkey?: string) 参数!: 参数类型; 以下两种方式都指向 ref="UserMessageComponent" 元素或子组件
    @Ref() UserMessageComponent!: UserMessageComponent;
    @Ref('UserMessageComponent') UserMessageComponentTow!: UserMessageComponent;

    @Ref() readonly refC!: HTMLButtonElement;
    private handleChildFun(): void {
        this.UserMessageComponent.del();
        this.UserMessageComponent.list;

        this.UserMessageComponent.livePlatList; // Property 'blivePlatList' is private and only accessible within class 'UserMessage'.

        this.refC.innerHTML // this.refC 为button 元素，测试ref
    }

}
</script>

<style lang="scss" scoped>
</style>

• vur-router 使用
• vuex 使用
  
  持续更新中。。。