vue-property-decorator使用指南
2019-08-14 10:15:34来源:博客园 阅读 ()
在Vue中使用TypeScript时,非常好用的一个库,使用装饰器来简化书写。
1、安装npm i -S vue-property-decorator
@Prop
@PropSync
@Provide
@Model
@Watch
@Inject
@Provide
@Emit
@Component
(provided by vue-class-component)Mixins
(the helper function namedmixins
provided by vue-class-component)
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
}
注意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) {} }
其它详见文档
原文链接:https://www.cnblogs.com/gxp69/p/11212395.html
如有疑问请与原作者联系
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
下一篇:原生js实现放大镜效果
- vue.js开发环境搭建教程 2020-03-16
- Vue input控件通过value绑定动态属性及修饰符的方法 2020-03-05
- 详解Webstorm 新建.vue文件支持高亮vue语法和es6语法 2020-02-07
- vue路由跳转时判断用户是否登录功能的实现 2020-01-17
- vue-cli中打包图片路径错误的解决方法 2020-01-17
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash