装饰器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)
简介 场景 通过继承和关联都可以给对象增加行为,区别如下: 继承是静态的(无法在程序运行时动态扩展),且作用于所有子类.硬编码,高耦合. 通过装饰器可以在运行时添加行为和属性到指定对象.关联关系就是在 ...
随机推荐
- python selenium IE Firxfor pyinstaller
以前在python环境下selenium 主要用的是chromdriver,这次发现老是报错(Timeout), 实际又是正确的, 可能是和chrome版本不正确,再加上我程序蹦来就在windows环 ...
- excel查找定位操作(for lutai)
产成品出库的单价要根据订单号和存货编码引用产成品入库的单价 方法一:使用Index 和Match =INDEX(产成品入库!I2:P13 ,IF( ) ,7) 方法二:使用vlookup ,首先 ...
- 关于redis key命名规范的设计
一.实现目标 简洁,高效,可维护 二.键值设计规约 1 . Redis key命名风格 [推荐]Redis key命名需具有可读性以及可管理性,不该使用含义不清的key以及特别长的key名: [强制] ...
- c# winform结合数据库动态生成treeview的父节点和子节点方法和思路
tb_food表的结构如图一: tb_foodtype表的结构如图二: //获取tb_foodtype表中的所有数据 private void InitDataTable() { SqlConnect ...
- DevExpress之GridControl控件小知识
DevExpress之GridControl控件小知识 一.当代码中的DataTable中有建数据关系时,DevExpress 的 GridControl 会自动增加一个子视图 .列名也就是子表的字段 ...
- tiny-spring 分析
tiny-spring 分析 前言 在阅读 Spring 的源代码(依赖注入部分和面向切面编程部分)时遇到不少困惑,庞大的类文件结构.纷繁复杂的方法调用.波诡云谲的多态实现,让自己深陷其中.一头雾水. ...
- 换个语言学一下 Golang(14) ——fmt包
Print() 函数将参数列表 a 中的各个参数转换为字符串并写入到标准输出中. 非字符串参数之间会添加空格,返回写入的字节数. func Print(a ...interface{}) (n int ...
- [Linux] 树莓派编译python3.7.4
python3.7.4 源码编译后遇到ssl错误: pip is configured with locations that require TLS/SSL, however the ssl mod ...
- 世界上最大的软件注册表-----npm
npm 是什么? npm 为你和你的团队打开了连接整个 JavaScript 天才世界的一扇大门.它是世界上最大的软件注册表,每星期大约有 30 亿次的下载量,包含超过 600000 个 包(pack ...
- Web消息推送框架windows部署实践
一.官方下载地址:https://www.workerman.net/web-sender 二.解压至任意目录下,双击start_for_win.bat,效果如下图: 三.打开Chrome浏览器访问: ...