vue中typescript装饰器的使用方法超实用教程


Posted in Javascript onJune 17, 2019

VueConf ,尤大说, Vue 支持 Ts 了,网上关于 Vue + Ts 的资料有点少, 楼主踩了一个星期坑,终于摸明白了 修饰器 的玩法,下面我们就来玩下 Vue 的 decorator 吧

1,data 值的声明

vue中typescript装饰器的使用方法超实用教程 

在这里 public 声明的是公有属性, private 声明的是私有属性,私有属性要带 下划线

蓝色框里的内容是声明组件,在每个组件创建时都要带上, Components 中的写法如下

vue中typescript装饰器的使用方法超实用教程 

上面是 普通写法 ,下面是 懒加载写法

2.@Prop 父组件传值给子组件

vue中typescript装饰器的使用方法超实用教程 

父组件使用 v-bind 传递与js版本一样,在父组件接受是使用修饰器

@Prop({type:‘类型'})

readonly:传递的参数名称!:类型

一定要写全,不然后报错,也可以写个 接口 约束 类型

3.@Emit  子组件给父组件传值

vue中typescript装饰器的使用方法超实用教程 

@Emit('传给父组件的值')

callback

父组件接收与 js 版本一致

4.@Provide @Inject  混入

vue中typescript装饰器的使用方法超实用教程 

这个没什么说的, @Provide 声明一个值 , 在其他地方用 @Inject 接收

5.@Model 双向绑定

vue中typescript装饰器的使用方法超实用教程 

这个也很简单,v-model绑定一个值,在子组件使用 @Model('页面展示的值') 值类型

这里我偷懒,声明一样的 (手动笑哭)

5.@Watch   监听函数

vue中typescript装饰器的使用方法超实用教程 

@Watch('监听的值',{深度监听})

callback 回调函数

6.钩子函数的声明

与js基本一致

Ts          -> Js
public create() {} -> create() {}
public mounted() {}  ->  mounted() {}
eg:
private _changeMsg() {} ->  methods: {
_changeMsg() {}
}
eg:
private get _changeValue() {} -> computed: {
_changeValue() {}
}
public destory() {}      -> destory() {}

7.@State vuex中state的值

vue中typescript装饰器的使用方法超实用教程 

@State(state => state数据里的参数) 页面展示的值

!!!!!! 注意vuex的数据都要在钩子函数里 调用 !!!!!!!!!!!!!!

8.@Mutation  vuex中的mutation

vue中typescript装饰器的使用方法超实用教程 

使用与 @State 一致

!!!!!!!!!!!!!需要注意的是要写一个接口 将state里面的数据类型写进去,如果直接用

state编辑器会报错 , 当然声明any类型也是可以的, 但是用了Ts还是尽量不要用any吧  

    !!!!!!!!!!!!!!!!!!!!

9.@Action vuex 中的action

vue中typescript装饰器的使用方法超实用教程 

@Action('action里的方法名') 页面展示的方法

!!!!!!!!  由于异步,需要加async await 不然会一直处在padding状态,

 使用promise也是可以的            !!!!!!!!!!!!!!!

至于 vue.config.js 网上很多方法,有兴趣的可以去找下,在这里贴下自己的

vue中typescript装饰器的使用方法超实用教程vue中typescript装饰器的使用方法超实用教程

     vue中typescript装饰器的使用方法超实用教程

      !!!!!!!!!!!!!!!!!!!!!!!

       使用时一定引入修饰器  

以上就是小编给大家姐的vue中typescript装饰器的使用方法超实用教程,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
js 函数的执行环境和作用域链的深入解析
Nov 01 Javascript
封装的jquery翻页滚动(示例代码)
Nov 18 Javascript
JS实现匀速运动的代码实例
Nov 29 Javascript
轻松实现jquery手风琴效果
Jan 14 Javascript
解决vue的变量在settimeout内部效果失效的问题
Aug 30 Javascript
vue + element-ui的分页问题实现
Dec 17 Javascript
详解Vue调用手机相机和相册以及上传
May 05 Javascript
微信小游戏之使用three.js 绘制一个旋转的三角形
Jun 10 Javascript
一次微信小程序内地图的使用实战记录
Sep 09 Javascript
vue 实现走马灯效果
Oct 28 Javascript
viewer.js一个强大的基于jQuery的图像查看插件(支持旋转、缩放)
Apr 01 jQuery
JavaScript的垃圾回收机制与内存管理
Aug 06 Javascript
简单学习5种处理Vue.js异常的方法
Jun 17 #Javascript
js/jQuery实现全选效果
Jun 17 #jQuery
解决微信浏览器缓存站点入口文件(IIS部署Vue项目)
Jun 17 #Javascript
通过说明与示例了解js五种设计模式
Jun 17 #Javascript
简单了解vue.js数组的常用操作
Jun 17 #Javascript
送你43道JS面试题(收藏)
Jun 17 #Javascript
通过实例学习React中事件节流防抖
Jun 17 #Javascript
You might like
如何冲泡挂耳包咖啡?技巧是什么
2021/03/04 冲泡冲煮
浅谈Windows下 PHP4.0与oracle 8的连接设置
2006/10/09 PHP
PHP通过session id 实现session共享和登录验证的代码
2012/06/03 PHP
php时间戳转换的示例
2014/03/31 PHP
PHP入门教程之正则表达式基本用法实例详解(正则匹配,搜索,分割等)
2016/09/11 PHP
PHP使用PHPExcel实现批量上传到数据库的方法
2017/06/08 PHP
PHP批量删除jQuery操作
2017/07/23 PHP
javascript 运算数的求值顺序
2011/08/23 Javascript
jQuery把表单元素变为json对象
2013/11/06 Javascript
jQuery拖拽 & 弹出层 介绍与示例
2013/12/27 Javascript
javascript 自定义回调函数示例代码
2014/09/26 Javascript
jQuery中addClass()方法用法实例
2015/01/05 Javascript
JavaScript操作DOM元素的childNodes和children区别
2015/04/01 Javascript
浅谈Javascript数组的使用
2015/07/29 Javascript
JavaScript修改作用域外变量的方法
2016/03/25 Javascript
javascript简易画板开发
2020/04/12 Javascript
Ionic 2 实现列表滑动删除按钮的方法
2017/01/22 Javascript
node文件批量重命名的方法示例
2017/10/23 Javascript
基于vue和websocket的多人在线聊天室
2020/02/01 Javascript
Vue.js获取手机系统型号、版本、浏览器类型的示例代码
2020/05/10 Javascript
[49:40]2018DOTA2亚洲邀请赛小组赛 A组加赛 TNC vs Newbee
2018/04/03 DOTA
python制作一个桌面便签软件
2015/08/09 Python
解决pycharm remote deployment 配置的问题
2019/06/27 Python
利用python在大量数据文件下删除某一行的例子
2019/08/21 Python
Python-Flask:动态创建表的示例详解
2019/11/22 Python
python3操作注册表的方法(Url protocol)
2020/02/05 Python
python实现二分类和多分类的ROC曲线教程
2020/06/15 Python
Python多分支if语句的使用
2020/09/03 Python
Python 可视化神器Plotly详解
2020/12/26 Python
pycharm 的Structure界面设置操作
2021/02/05 Python
CSS3中animation实现流光按钮效果
2020/12/21 HTML / CSS
canvas与html5实现视频截图功能示例
2016/12/15 HTML / CSS
navabi英国:设计师大码女装
2019/06/25 全球购物
国培远程培训感言
2014/03/08 职场文书
融资租赁计划书
2014/04/29 职场文书
红色电影观后感
2015/06/18 职场文书