vue-property-decorator使我们能在vue组件中写TypeScript语法,依赖于vue-class-component

装饰器:@Component、@Prop、@PropSync、@Model、@ModelSync、@Watch、@Emit、@Ref、@Provide、@Inject、@ProvideReactive、@InjectReactive、@VModel

@Component({})可以声明components、filter、directives等未提供装饰器的vue选项,也可以声明computed、watch、路由守卫函数(beforeRouteEnter、beforeRouteLeave)等

Component.registerHooks(['beforeRouteEnter', 'beforeRouteLeave'])全局注册路由守卫函数

computed在class类中写法:get name(){return '';}

@Prop()参数为prop的类型声明,属性的类型声明需要加上undefined类型或者在属性名后面加上!来断言非null和非undefined

@Prop(String) name!: string | undefined;

@Prop([String, Number]) count!: string | number;

@Prop({type: Number, default: 0, (required、validator)}) age!: number;

@Prop() private name!: string;

@PropSync()接收两个参数:参数一为父组件传递过来的属性名,参数二同@Prop的参数,声明类型,@PropSync会生成一个新的计算属性

在父组件上属性传递需在属性后面加上.sync修饰符(:name.sync="name")

子组件中@PropSync('name', {type: String}) newName!: string;

子组件中值发生变化会双向绑定修改父组件的值

@Model()在组件上自定义v-model语法糖,接收两个参数event: string事件名,options同@Prop的参数

@Model('change', {type: string}) readonly name!: string;

@ModelSync()语法用法同@Model,不同的是接收三个参数,参数一为父组件应用处传递的参数名,参数二为event事件名,参数三为options,@ModelSync()生成返回一个新的双向绑定计算属性

@ModelSync('checked', 'change', {type: Boolean})

readonly checkedValue!: boolean;

@Watch()接收两个参数,参数一为监听的属性名,参数二为一个对象

{immediate?: boolean, deep?: boolean}第一个表示监听开始后是否立即调用回调函数,第二个表示监听的属性变化时是否调用回调函数

@Watch('name')

onNameChanged(newVal: string, oldVal: string){}

@Emit()接收一个可选参数为第一个广播的事件名参数,如果没有提供该参数会将回调函数名的驼峰写法转化为中划线的写法作为广播触发的事件名

@Emit会将回调函数的返回值作为第二个参数,如果返回值为一个Promise对象,emit会在Promise-resolved后触发

@Emit('del') private delEmit(e: MouseEvent){}

@Emit()//省略参数将使用回调函数名,转化为中划线@add-data

addData(data: any){return '';}//如果此处不return,则使用函数参数data

@Ref()可选参数指向模板中的ref属性值,如果没有提供则使用装饰器后面的属性名作为参数

@Ref('ruleForm') private ref!: any;

@Ref('btn') readonly btnRef!: HTMLButtonElement;

@Provide、@Inject、@ProvideReactive、@InjectReactive提供了父子组件、多层嵌套组件以及兄弟组件数据传递的方法

父组件中通过Provide传递数据:

@Provide('foo') foo = 'foo';

子组件中通过Inject获取数据:

@Inject() private foo!: string;

@ProvideReactive、@InjectReactive响应式注入,配对使用

@VModel

@VModel({type: String}) name!: string;

等价于js中

export default {

props: {

value: {

type: String

}

},

computed: {

name: {

get(){return this.value;},

set(value){this.$emit('input', value);}

}

}

}

vue-property-decorator的更多相关文章

  1. 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 | ...

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

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

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

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

  4. Python内置函数(63)——property

    英文文档: class property(fget=None, fset=None, fdel=None, doc=None) Return a property attribute. fget is ...

  5. Python内置函数(51)——property

    英文文档: class property(fget=None, fset=None, fdel=None, doc=None) Return a property attribute. fget is ...

  6. Fluent Python: @property

    Fluent Python 9.6节讲到hashable Class, 为了使Vector2d类可散列,有以下条件: (1)实现__hash__方法 (2)实现__eq__方法 (3)让Vector2 ...

  7. python基础===装饰器@property 的扩展

    以下来自Python 3.6.0 Document: class property(fget=None, fset=None, fdel=None, doc=None) Return a proper ...

  8. vue 插件

    开发插件 插件通常会为vue添加全局功能,插件的范围没有限制--一般有下面几种: 1,添加全局方法或者属性,例:vue-coustom-element 2,添加全局资源:指令.过滤器,.过渡等,如vu ...

  9. Decorator:从原理到实践

    前言 原文链接:Nealyang/personalBlog ES6 已经不必在过多介绍,在 ES6 之前,装饰器可能并没有那么重要,因为你只需要加一层 wrapper 就好了,但是现在,由于语法糖 c ...

  10. Property - 特性(Python)

    Property - Python 特性 不同的书籍对 property 一词的翻译有所不同, 我们将 property 翻译成 '特性' 以区别于 attribute 一词. 先看看 propert ...

随机推荐

  1. python---反转链表

    class Node: def __init__(self, data): self.data = data self.next = None class Solution: "" ...

  2. mysql4与mysql5的区别_MySQL 4.1/5.0/5.1/5.5/5.6各版本的主要区别

    MySQL 4.1/5.0/5.1/5.5/5.6各版本的主要区别 一.5.0 增加了Stored procedures.Views.Cursors.Triggers.XA transactions的 ...

  3. js模块系统 - amd|cmd|commonjs|esm|umd

    写过前端代码大概率听说过amd cmd umd commonjs esm这些名词, 想当初我第一次看到这些的时候, 人都麻了, 都是些啥啊. 后来我知道了, 这些都是js的模块规范. amd - 浏览 ...

  4. android软件简约记账app开发day05-记账页面条目代码优化和bug解决

    android软件简约记账app开发day05-记账页面条目代码优化和bug解决 今天还是因为该bug又极大的耽误了项目进程,该开发文档都要没有时间来写了. 先说bug吧,在昨天已经实现了页面图标的展 ...

  5. JavaScript学习高级2

    ## DOM:     * 概念: Document Object Model 文档对象模型         * 将标记语言文档的各个组成部分,封装为对象.可以使用这些对象,对标记语言文档进行CRUD ...

  6. python黑帽子(第二章)

    TCP客户端 在渗透测试工程中,我们经常会遇到需要创建一个TCP客户端来连接网络.发送垃圾数据.进行模糊测试等任务的情况.但是所处环境不具备丰富的网络工具,下面是一个简单的TCP客户端 import ...

  7. C++逆向 可变参数Hook

    目录 C++逆向 可变参数Hook 0x00 前言: 0x01 C++可变参数: 可变参数简介 可变参数代码实战 0x02 逆向分析C++可变参数原理 0x03 printf Hook实战 Pwn菜鸡 ...

  8. python学习-Day35

    目录 今日内容详细 代码创建进程 创建进程的方式 第一种创建进程的方式 创建进程的第二种方式 进程实现并发 join方法 进程间数据默认隔离 进程对象属性和方法 进程号如何查看 查看进程号的方法 杀死 ...

  9. AsyncLocal<T>在链路追踪中的应用

    前言 在项目生产中日志的记录是必不可少的,在.net项目中,要说日志组件,log4net绝对可有一席之地,随着公司业务的发展,微服务则必定无可避免.在跨服务中通过日志进行分析性能或者排查故障点,如何快 ...

  10. CentOS 8迁移Rocky Linux 8手记

    前言 由于CentOS 8的支持已经到期了,.NET 6也不支持了,然后也无法升级,导致使用起来已经非常不便,无奈只有迁移服务器这个选项了. 选择发行版本一直是一个比较头疼的问题,首先我不是专门运维的 ...