1、安装vue-property-decorator
npm i -D vue-proporty-decorator
看看页面代码展示：
<template>
<div class="upload-container">
<el-upload
:data="dataObj"
:multiple="false"
:show-file-list="false"
:on-success="handleImageSuccess"
class="image-uploader"
drag
action="https://httpbin.org/post"
>
<i class="el-icon-upload" />
<div class="el-upload__text">
将文件拖到此处，或<em>点击上传</em>
</div>
</el-upload>
<div class="image-preview image-app-preview">
<div
v-show="imageUrl.length>1"
class="image-preview-wrapper"
>
<img :src="imageUrl">
<div class="image-preview-action">
<i
class="el-icon-delete"
@click="rmImage"
/>
</div>
</div>
</div>
<div class="image-preview">
<div
v-show="imageUrl.length>1"
class="image-preview-wrapper"
>
<img :src="imageUrl">
<div class="image-preview-action">
<i
class="el-icon-delete"
@click="rmImage"
/>
</div>
</div>
</div>
</div>
</template>
<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator'
@Component({
name: 'UploadImage'
})
export default class extends Vue {
@Prop({ default: '' }) private value!: string
private tempUrl = ''
private dataObj = { token: '', key: '' }
get imageUrl() {
return this.value
}
private emitInput(value: string) {
this.$emit('input', value)
}
private rmImage() {
this.emitInput('')
}
private handleImageSuccess(res: any) {
this.emitInput(res.files.file)
}
}
</script>
vue-proporty-decorator它具备以下几个装饰器和功能:
@Component
@Prop
@PropSync
@Model
@Watch
@Provide
@Inject
@ProvideReactive
@InjectReactive
@Emit
@Ref
1、@Component(options:ComponentOptions = {})
@Component 装饰器可以接收一个对象作为参数，可以在对象中声明 components ，filters，directives等未提供装饰器的选项，也可以声明computed，watch等
registerHooks:
除了上面介绍的将beforeRouteLeave放在Component中之外,还可以全局注册,就是registerHooks
<script lang="ts">
import {Vue, Component} from 'vue-property-decorator';
@Component({
components: {
HolleWorld
}
})
export default class "组件名" extends Vue{
ValA: string = "hello world";
ValB: number = 1;
}
</script>
2、@Prop(options: (PropOptions | Constructor[] | Constructor) = {})
@Prop装饰器接收一个参数，这个参数可以有三种写法：
Constructor，例如String，Number，Boolean等，指定 prop 的类型；
Constructor[]，指定 prop 的可选类型；
PropOptions，可以使用以下选项：type，default，required，validator。
注意:属性的ts类型后面需要加上undefined类型；或者在属性名后面加上!，表示非null 和 非undefined
的断言，否则编译器会给出错误提示；
// 父组件:
<template>
<div class="Props">
<PropComponent :name="name" :age="age" :sex="sex"></PropComponent>
</div>
</template>
<script lang="ts">
import {Component, Vue,} from 'vue-property-decorator';
import PropComponent from '@/components/PropComponent.vue';
@Component({
components: {PropComponent,},
})
export default class PropsPage extends Vue {
private name = '张三';
private age = 1;
private sex = 'nan';
}
</script>
// 子组件:
<template>
<div class="hello">
name: {{name}} | age: {{age}} | sex: {{sex}}
</div>
</template>
<script lang="ts">
import {Component, Vue, Prop} from 'vue-property-decorator';
@Component
export default class PropComponent extends Vue {
@Prop(String) readonly name!: string | undefined;
@Prop({ default: 30, type: Number }) private age!: number;
@Prop([String, Boolean]) private sex!: string | boolean;
}
</script>
//@Prop的用法
@Prop({
type: Boolean, // 父组件传递给子组件的数据类型
required: false, // 是否必填
default: false // 默认值， 如果传入的是 Object，则要 default: ()=>({}) 参数为函数
}) collapsed !: boolean
@Prop()private datas!: any
感叹号是非null和非undefined的类型断言，所以上面的写法就是对datas这个属性进行非空断言
3、@PropSync(propName: string, options: (PropOptions | Constructor[] | Constructor) = {})
@PropSync装饰器与@prop用法类似，二者的区别在于：
@PropSync 装饰器接收两个参数：
propName: string 表示父组件传递过来的属性名；
options: Constructor | Constructor[] | PropOptions 与@Prop的第一个参数一致；
@PropSync 会生成一个新的计算属性。
注意,使用PropSync的时候是要在父组件配合.sync使用的
// 父组件
<template>
<div class="PropSync">
<h1>父组件</h1>
like:{{like}}
<hr/>
<PropSyncComponent :like.sync="like"></PropSyncComponent>
</div>
</template>
<script lang='ts'>
import { Vue, Component } from 'vue-property-decorator';
import PropSyncComponent from '@/components/PropSyncComponent.vue';
@Component({components: { PropSyncComponent },})
export default class PropSyncPage extends Vue {
private like = '父组件的like';
}
</script>
// 子组件
<template>
<div class="hello">
<h1>子组件:</h1>
<h2>syncedlike:{{ syncedlike }}</h2>
<button @click="editLike()">修改like</button>
</div>
</template>
<script lang="ts">
import { Component, Prop, Vue, PropSync,} from 'vue-property-decorator';
@Component
export default class PropSyncComponent extends Vue {
@PropSync('like', { type: String }) syncedlike!: string; // 用来实现组件的双向绑定,子组件可以更改父组件穿过来的值
editLike(): void {
this.syncedlike = '子组件修改过后的syncedlike!'; // 双向绑定,更改syncedlike会更改父组件的like
}
}
</script>
4、@Model(event?: string, options: (PropOptions | Constructor[] | Constructor) = {})
@Model装饰器允许我们在一个组件上自定义v-model，接收两个参数：
event: string 事件名。
options: Constructor | Constructor[] | PropOptions 与@Prop的第一个参数一致。
注意,有看不懂的,可以去看下vue官网文档, https://cn.vuejs.org/v2/api/#model
// 父组件
<template>
<div class="Model">
<ModelComponent v-model="fooTs" value="some value"></ModelComponent>
<div>父组件 app : {{fooTs}}</div>
</div>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import ModelComponent from '@/components/ModelComponent.vue';
@Component({ components: {ModelComponent} })
export default class ModelPage extends Vue {
private fooTs = 'App Foo!';
}
</script>
// 子组件
<template>
<div class="hello">
子组件:<input type="text" :value="checked" @input="inputHandle($event)"/>
</div>
</template>
<script lang="ts">
import {Component, Vue, Model,} from 'vue-property-decorator';
@Component
export default class ModelComponent extends Vue {
@Model('change', { type: String }) readonly checked!: string
public inputHandle(that: any): void {
this.$emit('change', that.target.value); // 后面会讲到@Emit,此处就先使用this.$emit代替
}
}
</script>
5，@Watch(path: string, options: WatchOptions = {})
@Watch 装饰器接收两个参数：
path: string 被侦听的属性名；
options?: WatchOptions={} options可以包含两个属性 ：
immediate?:boolean 侦听开始之后是否立即调用该回调函数；
deep?:boolean 被侦听的对象的属性被改变时，是否调用该回调函数；
发生在beforeCreate勾子之后，created勾子之前
<template>
<div class="PropSync">
<h1>child:{{child}}</h1>
<input type="text" v-model="child"/>
</div>
</template>
<script lang="ts">
import { Vue, Watch, Component } from 'vue-property-decorator';
@Component
export default class WatchPage extends Vue {
private child = '';
@Watch('child')
onChildChanged(newValue: string, oldValue: string) {
console.log(newValue);
console.log(oldValue);
}
}
</script>
6，@Emit(event?: string)
@Emit 装饰器接收一个可选参数，该参数是Emit会将回调函数名的camelCase转为kebab-case，并将其作为事件名；
@Emit会将回调函数的返回值作为第二个参数，如果返回值是一个Promise对象，emit当做参数使用。
// 父组件
<template>
<div class="">
点击emit获取子组件的名字<br/>
姓名:{{emitData.name}}
<hr/>
<EmitComponent sex='女' @add-to-count="returnPersons" @delemit="delemit"></EmitComponent>
</div>
</template>
<script lang="ts">
import { Vue, Component } from 'vue-property-decorator';
import EmitComponent from '@/components/EmitComponent.vue';
@Component({
components: { EmitComponent },
})
export default class EmitPage extends Vue {
private emitData = { name: '我还没有名字' };
returnPersons(data: any) {
this.emitData = data;
}
delemit(event: MouseEvent) {
console.log(this.emitData);
console.log(event);
}
}
</script>
// 子组件
<template>
<div class="hello">
子组件:
<div v-if="person">
姓名:{{person.name}}<br/>
年龄:{{person.age}}<br/>
性别:{{person.sex}}<br/>
</div>
<button @click="addToCount(person)">点击emit</button>
<button @click="delToCount($event)">点击del emit</button>
</div>
</template>
<script lang="ts">
import {
Component, Vue, Prop, Emit,
} from 'vue-property-decorator';
type Person = {name: string; age: number; sex: string };
@Component
export default class PropComponent extends Vue {
private name: string | undefined;
private age: number | undefined;
private person: Person = { name: '我是子组件的张三', age: 1, sex: '男' };
@Prop(String) readonly sex: string | undefined;
@Emit('delemit') private delEmitClick(event: MouseEvent) {}
@Emit() // 如果此处不设置别名字,则默认使用下面的函数命名
addToCount(p: Person) { // 此处命名如果有大写字母则需要用横线隔开 @add-to-count
return this.person; // 此处不return,则会默认使用括号里的参数p;
}
delToCount(event: MouseEvent) {
this.delEmitClick(event);
}
}
</script>
7，@Ref(refKey?: string)
@Ref 装饰器接收一个可选参数，用来指向元素或子组件的引用信息。如果没有提供这个参数，会使用装饰器后面的属性名充当参数
<template>
<div class="PropSync">
<button @click="getRef()" ref="aButton">获取ref</button>
<RefComponent name="names" ref="RefComponent"></RefComponent>
</div>
</template>
<script lang="ts">
import { Vue, Component, Ref } from 'vue-property-decorator';
import RefComponent from '@/components/RefComponent.vue';
@Component({
components: { RefComponent },
})
export default class RefPage extends Vue {
@Ref('RefComponent') readonly RefC!: RefComponent;
@Ref('aButton') readonly ref!: HTMLButtonElement;
getRef() {
console.log(this.RefC);
console.log(this.ref);
}
}
</script>
总结：
1、写法问题：引入组件和接收父组件传过来的参数
@Component({
components: {
XXXX
},
props: {
mapFlag: Number
}
})
2、获取refs，在其后面加上as HTMLDivElement（不知道是不是这插件引起的，懒得管，直接干就是）
let layoutList:any = this.$refs.layout as HTMLDivElement
或
let fieldCalculate:any = (this as any).$refs.fieldCalculate
3、ts文件 公用方法导出
const xxx = (value: any, type: string) => {
...
}
export { xxx, xxx, xxx, xxx }
4、引入装饰器，使用方式@Watch
import { Component, Prop, Watch, Emit } from 'vue-property-decorator'
5、引用插件。在shims-vue.d.ts 文件中声明，再在组件中引用
declare module 'vuedraggable' {
const vuedraggable: any;
export default vuedraggable;
}
6、@Watch使用
// 监听formula 其变化则显示验证公式按钮
@Watch('formula', { deep: true, immediate: true }) formulaWatch (newVal:string, oldVal:string) {
if (newVal !== oldVal) {
this.grammarSuccess = true
this.errMsgFlag = false
this.checkFormulaSuccess = false
}
}
7、计算属性方法写法（跟@watch一样，当成方法写就行；加一个关键字get）
get aTagDatasFcomput () {
// computed计算属性， 过滤出visible为true的对象来渲染，
因为当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级，这意味着 v-if 将分别重复运行于每个 v-for 循环中
return this.aTagDatasF.filter(item => item.visible)
}
8、@Prop的用法
@Prop({
type: Boolean, // 父组件传递给子组件的数据类型
required: false, // 是否必填
default: false // 默认值， 如果传入的是 Object，则要 default: ()=>({}) 参数为函数
}) collapsed !: boolean
@Prop()private datas!: any
感叹号是非null和非undefined的类型断言，所以上面的写法就是对datas这个属性进行非空断言
9、ts设置html的fontSize
let docEl = document.documentElement as HTMLDivElement // 加上 as HTMLDivElement
