装饰器vue-property-decorator
接触到了新的vue项目,使用vue+ts+vue-property-decotator来进行项目的简化,一时间语法没有看懂,所以花时间学习这个装饰器的包。
1.装饰器 @Component(options:Component = {})
默认接受一个对象作为参数,在这个对象中声明components、 filters、 directives等未提供装饰符的选项,也可以声明computed、watch等
import { Component, Vue } from 'vue-property-decorator'
import Gap from './Gap.vue' @Component({
components: {
Gap,
}
})
export default class CorrectQuestionResult extends Vue{
get trueAnswerText () {
const trueAnswer = this.trueAnswer.ecAnswers![0]
return this.formatAnswerDesc(trueAnswer.operation!, trueAnswer.source!, trueAnswer.target!)
}
}
在@component中声明了引入的组件,组件的写法也发生了改变,export default class '组件name' extends Vue, 在vue中data、computed的形式也发生改变
<script lang="ts">
import {Vue, Component} from 'vue-property-decorator'; @Component({})
export default class "组件名" extends Vue{
ValA: string = "hello world";
ValB: number = 1;
get val() {
return this.ValB + 1;
}
}
</script>
等同于
<script>
export default {
data() {
return {
ValA: string = "hello world";
ValB: number = 1;
}
},
computed: {
val() {
return this.ValB + 1;
}
}
}
</script>
2.@Prop(options: (PropOptions | construct[] | construct))
@Prop接受一个参数,可以有三种写法
Constructor,例如String,Number, Boolean等,指定prop的类型
Constructor[],指定prop的类型
PropOptions,可以使用以下选项:type,default,required,validator
import { Vue, Component, Prop } from 'vue-property-decorator' @Componentexport default class MyComponent extends Vue {
@Prop(String) public propA: string | undefined
@Prop([String, Number]) public propB!: string | number
@Prop({
type: String,
default: 'abc'
})
public propC!: string
}
warning:
属性的ts类型后面需要加上undefined
类型;或者在属性名后面加上!,表示非null
和 非undefined
的断言,否则编译器会给出错误提示
指定默认值必须使用上面例子中的写法,如果直接在属性名后面赋值,会重写这个属性,并且会报错。
3.@Model(event?: string, options:(PropOptions | Contructor[] | Constructor) = {})
装饰自定义Model,自定义v-model,接收两个参数:1.event 2. prop; 和vue官方的参数一致,只是装饰器写法稍有不同。
import { Vue, Component, Model } from 'vue-property-decorator' @Component
export default class MyInput extends Vue {
@Model('change', { type: String, default: '123' }) public value!: string
}
需要在父组件中配合
<input
type="text"
v-model="value" // 真的
:value="value" // 假的
@change="$emit('change', $event.target.value)" // 假的
/>
4.@Watch (path: string, options:watchOptions = {}), 接收两个参数 path: 被监听的属性名, 监听的条件:{immediate: boolean , 监听之后是否立即调用该毁掉函数; deep:boolean,被监听的对象属性改变,是否调用该函数}
import { Vue, Component, Watch } from 'vue-property-decorator' @Component
export default class MyInput extends Vue {
@Watch('msg')
public onMsgChanged(newValue: string, oldValue: string) {} @Watch('arr', { immediate: true, deep: true })
public onArrChanged1(newValue: number[], oldValue: number[]) {} @Watch('arr')
public onArrChanged2(newValue: number[], oldValue: number[]) {}
}
5.@Emit装饰器
1.接收一个可选参数,该参数是$emit的第一个参数(事件名),如果没有提供这个参数,$emit会将回调函数的cameCase转为kebab-case,作为事件名
2.会将回调函数的返回值作为第二个参数,如果返回值是一个promise对象,$emit会在promise状态改为resolve之后触发。
3.emit回调函数的参数,将会放在其返回值之后,一起被$emit当作参数使用。
import { Vue, Component, Emit } from 'vue-property-decorator' @Component
export default class MyComponent extends Vue {
count = 0
@Emit()
public addToCount(n: number) {
this.count += n
}
@Emit('reset')
public resetCount() {
this.count = 0
}
@Emit()
public returnValue() {
return 10
}
@Emit()
public onInputChange(e) {
return e.target.value
}
@Emit()
public promise() {
return new Promise(resolve => {
setTimeout(() => {
resolve(20)
}, 0)
})
}
}
等同于
export default {
data() {
return {
count: 0
}
},
methods: {
addToCount(n) {
this.count += n
this.$emit('add-to-count', n)
},
resetCount() {
this.count = 0
this.$emit('reset')
},
returnValue() {
this.$emit('return-value', 10)
},
onInputChange(e) {
this.$emit('on-input-change', e.target.value, e)
},
promise() {
const promise = new Promise(resolve => {
setTimeout(() => {
resolve(20)
}, 0)
})
promise.then(value => {
this.$emit('promise', value)
})
}
}
}
6.Mixins在vue中有两种配合typescript的混合方法,一种需要定义接口、一种不需要定义vue/type/vue模块
//定义要混合的类 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
}
}
第二种方式,需要定义vue/type/vue模块,1.改造混入的ts文件定义 vue/type/vue接口
// mixins.ts
import { Vue, Component } from 'vue-property-decorator'; declare module 'vue/types/vue' {
interface Vue {
value: string;
}
} @Component
export default class myMixins extends Vue {
value: string = 'Hello'
}
import { Vue, Component, Prop } from 'vue-property-decorator';
import myMixins from '@static/js/mixins'; @Component({
mixins: [myMixins]
})
export default class myComponent extends Vue{
created(){
console.log(this.value) // => Hello
}
}
两种方法的不同是定义vue/type/vue模块,在混入的时候就要继承该mixins,,如果是定了该模块,直接在@Component中混入即可
装饰器vue-property-decorator的更多相关文章
- 装饰器模式&&ES7 Decorator 装饰器
装饰器模式(Decorator Pattern)允许向一个现有的对象动态添加新的功能,同时又不改变其结构.相比JavaScript中通过鸡肋的继承来给对象增加功能来说,装饰器模式相比生成子类更为灵活. ...
- 装饰器模式(Decorator Pattern)
装饰器模式 一.什么是装饰器模式 装饰器模式(Decorator Pattern)允许向一个现有的对象添加新的功能,同时又不改变其结构.这种类型的设计模式属于结构型模式,它是作为现有的类的一个包装 ...
- 设计模式之装饰器模式(decorator pattern)
装饰器模式主要对现有的类对象进行包裹和封装,以期望在不改变类对象及其类定义的情况下,为对象添加额外功能.是一种对象结构型模式.需要注意的是,该过程是通过调用被包裹之后的对象完成功能添加的,而不是直接修 ...
- C#设计模式-装饰器模式(Decorator Pattern)
引言 当我们完成一个软件产品开发后就需要对其进行各种测试,适配快速迭代下质量的保障.当有一个完善的产品的对象后,如果我们想要给他添加一个测试功能,那么我们可以用一个新的类去装饰它来实现对原有对象职责的 ...
- PHP设计模式之装饰器模式(Decorator)
PHP设计模式之装饰器模式(Decorator) 装饰器模式 装饰器模式允许我们给一个类添加新的功能,而不改变其原有的结构.这种类型的类属于结构类,它是作为现有的类的一个包装 装饰器模式的应用场景 当 ...
- python 装饰器学习(decorator)
最近看到有个装饰器的例子,没看懂, #!/usr/bin/python class decorator(object): def __init__(self,f): print "initi ...
- java设计模式之七装饰器模式(Decorator)
顾名思义,装饰模式就是给一个对象增加一些新的功能,而且是动态的,要求装饰对象和被装饰对象实现同一个接口,装饰对象持有被装饰对象的实例,关系图如下: Source类是被装饰类,Decorator类是一个 ...
- python之内置装饰器(property/staticmethod/classmethod)
python内置了property.staticmethod.classmethod三个装饰器,有时候我们也会用到,这里简单说明下 1.property 作用:顾名思义把函数装饰成属性 一般我们调用类 ...
- 装饰器模式(Decorator)
一.装饰模式介绍 装饰模式(decorator):表示动态的给一个对象添加一些新的功能(利用子类继承父类也可以实现),但是比生成子类方式更灵活. 也叫装饰者模式或者装饰器模式 例如:我们每个人身上穿的 ...
- 设计模式 - 装饰器模式(Decorator)
简介 场景 通过继承和关联都可以给对象增加行为,区别如下: 继承是静态的(无法在程序运行时动态扩展),且作用于所有子类.硬编码,高耦合. 通过装饰器可以在运行时添加行为和属性到指定对象.关联关系就是在 ...
随机推荐
- eDiary
多年过去,您经历了BBS.论坛.博客.推特.微博 ...,但在电脑的某个 角落,eDiary始终为你守护发自你内心的声音. eDiary的作用不仅仅在于写日记,您也可以用它来记流水帐.写工作日志, 记 ...
- git new
Quick setup — if you’ve done this kind of thing before Set up in Desktop or HTTPSSSH Get started by ...
- c++11多线程记录0
两种并发编程模型 多进程 进程间通信常用的几种方式: 文件 管道 消息队列 多线程 一个进程中存在的多个线程,通常通过共享内存来通信,(说的非常非常粗俗,就是通过类似"全局变量"的 ...
- Go语言系列教程(十二)之函数完结篇
Hello,各位小伙伴大家好,我是小栈君.上一期我们讲到了关于函数的有参.无参.匿名函数,本期我们分享一下关于go语言函数类型.匿名函数和闭包的概念和实战.闲话不多说,立马开始分享. 在Go语言中,函 ...
- Java学习:面向对象三大特征:封装性、继承性、多态性之多态性。
面向对象三大特征:封装性.继承性.多态性之多态性. extends继承或者implemens实现,是多态性的前提. 例如:小菜是一个学生,但同时也是一个人.小菜是一个对象,这个对象既有学生形态,也有人 ...
- MySQL卸载与重装
[卸载] 不推荐使用控制面板-->卸载程序,来卸载,容易出现报错. 使用电脑管家卸载很轻松. [删除注册列表] HKEY_LOCAL_MACHINE\SYSTEM\ControlSet001\S ...
- 用RD,GR,BL三个方法内代码生成一张图片(非原创,我只是完整了代码)
我公开以下图片的源代码,,是ppm格式的,,自己找到能打开的工具.. (非原创,我加工的代码,可直接执行运行输出,缩略图能看到效果) 这是原博客 http://news.cnblogs.com/n/ ...
- Java自学-异常处理 Exception
Java 异常 Exception 异常定义: 导致程序的正常流程被中断的事件,叫做异常 步骤 1 : 文件不存在异常 比如要打开d盘的LOL.exe文件,这个文件是有可能不存在的 Java中通过 n ...
- android如何在标题栏设置返回返回图标返回到另一个activity
在java代码中: 添加返回按钮 Objects.requireNonNull(getSupportActionBar()).setDisplayHomeAsUpEnabled(true); 进行返回 ...
- jackson 学习资料
源代码托管地址 https://github.com/FasterXML/jackson https://github.com/FasterXML/jackson-docs http://www.st ...