在Vue中使用TypeScript时,非常好用的一个库,使用装饰器来简化书写。

1、安装npm i -S vue-property-decorator

2、@Component

即使没有组件也不能省略@Component,否则会报错。

import {Component,Vue} from 'vue-property-decorator';
import {componentA,componentB} from '@/components'; @Component({
components:{
componentA,
componentB,
},
directives: {
focus: {
// 指令的定义
inserted: function (el) {
el.focus()
}
}
}
})
export default class YourCompoent extends Vue{ }

3、@Prop 父子组件之间值的传递

@Prop(options: (PropOptions | Constructor[] | Constructor) = {}) decorator

import { Vue, Component, Prop } from 'vue-property-decorator'

@Component
export default class YourComponent extends Vue {
@Prop(Number) readonly propA: number | undefined
@Prop({ default: 'default value' }) readonly propB!: string
@Prop([String, Boolean]) readonly propC: string | boolean | undefined
  @Prop([String,Number]) propB:string|number;
  @Prop({
    type: String,// type: [String , Number]
    default: 'default value', // 一般为String或Number
    //如果是对象或数组的话。默认值从一个工厂函数中返回
    // defatult: () => {
      // return ['a','b']
    // }
    required: true,
     validator: (value) => { return [ 'InProcess', 'Settled' ].indexOf(value) !== -1 } }) propC:string;
}

注意title参数中的感叹号。如果需要设置为true或者有默认道具,我只使用它。如果没有,那么你应该使用| undefined。

“明确的赋值断言是一个特性,允许在实例属性和变量声明之后放置!以向TypeScript传递一个变量确实被分配用于所有意图和目的,即使TypeScript的分析无法检测到它。”

@Componentexport default class MyComponent extends Vue {
@Prop({ required: true }) title!: string
@Prop() optionalItem: string|undefined
}

4、@Emit

@Emit(event?: string) decorator

import { Vue, Component, Emit } from 'vue-property-decorator'

@Component
export default class YourComponent extends Vue {
count = 0 @Emit()
addToCount(n: number) {
this.count += n
} @Emit('reset')
resetCount() {
this.count = 0
} @Emit()
returnValue() {
return 10
} @Emit()
onInputChange(e) {
return e.target.value
} @Emit()
promise() {
return new Promise(resolve => {
setTimeout(() => {
resolve(20)
}, 0)
})
}
}

5、@Watch

@Watch(path: string, options: WatchOptions = {}) decorator

import { Vue, Component, Watch } from 'vue-property-decorator'

@Component
export default class YourComponent extends Vue {
@Watch('child')
onChildChanged(val: string, oldVal: string) {} @Watch('person', { immediate: true, deep: true })
onPersonChanged1(val: Person, oldVal: Person) {} @Watch('person')
onPersonChanged2(val: Person, oldVal: Person) {}
}

其它详见文档

vue-property-decorator使用指南的更多相关文章

  1. vue入门|ElementUI使用指南

    vue入门|ElementUI使用指南 1.开发前务必熟悉的文档: vue.js2.0中文,项目所使用的js框架 vue-router,vue.js配套路由 vuex 状态管理 Element UI框 ...

  2. Property 'validate' does not exist on type 'Element | Element[] | Vue | Vue[]'. Property 'valid...

    使用vue-cli 3.0+Element-ui时候,调用form表单校验时候出现的问题是: Property 'validate' does not exist on type 'Element | ...

  3. Vue精简版风格指南

    前面的话 Vue官网的风格指南按照优先级(依次为必要.强烈推荐.推荐.谨慎使用)分类,且代码间隔较大,不易查询.本文按照类型分类,并对部分示例或解释进行缩减,是Vue风格指南的精简版 组件名称 [组件 ...

  4. Vue.js命名风格指南

    前言 本命名风格指南推荐了一种统一的命名规范来编写 Vue.js 代码.这使得代码具有如下的特性: 统一团队的命名规范,其它开发者或是团队成员更容易上手阅读和理解. IDEs 更容易理解代码,从而提供 ...

  5. Vue的理解:Vue.js新手入门指南----转

    最近在逛各大网站,论坛,以及像SegmentFault等编程问答社区,发现Vue.js异常火爆,重复性的提问和内容也很多,楼主自己也趁着这个大前端的热潮,着手学习了一段时间的Vue.js,目前用它正在 ...

  6. cordova + Vue 开发 APP 上手指南

    什么是 cordova cordova 是由 Apache 基金会支持的,使用 HTML5 + CSS3 + JS 来构建多平台 APP 程序的开发框架.其支持调用手机系统(Android.IOS.W ...

  7. Vue.js新手入门指南

    最近在逛各大网站,论坛,以及像SegmentFault等编程问答社区,发现Vue.js异常火爆,重复性的提问和内容也很多,楼主自己也趁着这个大前端的热潮,着手学习了一段时间的Vue.js,目前用它正在 ...

  8. Vue 3.0 升级指南

    本文由葡萄城技术团队原创并首发 转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者. 2020年9月18日Vue 3.0正式发布,距离2016年10月1日Vue ...

  9. 使用 Vue + TypeScript 时项目中常用的装饰器

    目录 一.@Component 装饰器 1)父组件 2)子组件 二. @Emit 装饰器 1)父组件 2)子组件 三. @Model 装饰器 1)父组件 2)子组件 四. @Prop 装饰器 1)父组 ...

  10. Vue.js的库,包,资源的列表大全。

    官方资源 外部资源 社区 播客 官方示例 入门 开发工具 语法高亮 代码片段 自动补全 组件集合 库和插件 路由 ajax/数据 状态管理 校验 UI组件 i18n 示例 模板 脚手架 整合 插件/指 ...

随机推荐

  1. uni-app开发小程序入门到崩溃

    最近一段时间公司要做一个小程序项目,还要支持,微信小程序,头条小程序,百度小程序.一套代码,实现三个平台.当时接到这个任务,就不知道怎么去下手,一套代码,分别要发布三个平台,赶紧就去上网了解这些东西, ...

  2. 添加junit和spring-test还是用不了@Test和@RunWith(SpringJUnit4ClassRunner.class)注解

    pom.xml依赖如下 <!-- spring 单元测试组件包 --> <dependency> <groupId>org.springframework</ ...

  3. Elasticsearch(GEO)数据写入和空间检索

    Elasticsearch简介 什么是 Elasticsearch? Elasticsearch 是一个开源的分布式 RESTful搜索和分析引擎,能够解决越来越多不同的应用场景. 本文内容 本文主要 ...

  4. ORA-27140: attach to post/wait facility failed

    Errors in file /home/u01/app/oracle/diag/rdbms/hnybdb21/hnybdb211/trace/hnybdb211_j000_143099.trc:OR ...

  5. bayaim——听课笔记_01.Docker基础应用 10课.txt

    ===========2019年8月5日18:39:06====================10.20.100.21rootbayaim ==========01-Docker介绍======== ...

  6. CentOS 7上的主机名设置和基本网络管理

    主机名 CentOS 6 查看. # hostname 设置. # hostname NEW_NAME 设置完成后,xshell的会话中不会显示NEW_NAME,可通过重新登录会话来显示.不过实际上我 ...

  7. 今天遇到的一些关于vsftp的坑!!!

    起因:最近在捣鼓Linux,配置vsftp的时候发现权限问题很坑,头疼了一天,发现了一点小问题 常见的身份验证方式: 1.使用系统的用户认证 例如vsftp这种软件,如果想建立一个可以登录FTP的用户 ...

  8. badboy脚本录制工具的安装

    一.获取软件包 百度搜索badboy,或者直接访问官网:https://badboy.en.softonic.com/ 点击Download,下载安装包 或者从我的网盘提取: 链接:https://p ...

  9. 精通awk系列(9):修改字段或NF引起的$0重新计算

    回到: Linux系列文章 Shell系列文章 Awk系列文章 修改字段或NF值的联动效应 注意下面的分割和计算两词:分割表示使用FS(field Separator),计算表示使用预定义变量OFS( ...

  10. win10下配置python环境变量(Python配置环境变量)

    从官网下载Windows下的python版本,一路按照默认进行安装. 安装之后配置环境变量的步骤如下: 1,点“我的电脑”,右键选“属性”. 2,选择“高级系统设置”--->选“环境变量”--- ...