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

站长资源 2024/11/26 佚名

2 0 1

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

1，data 值的声明

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

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

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

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

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

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

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

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

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

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

callback

父组件接收与 js 版本一致

4.@Provide @Inject 混入

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

5.@Model 双向绑定

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

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

5.@Watch 监听函数

@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的值

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

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

8.@Mutation vuex中的mutation

使用与 @State 一致

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

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

！！！！！！！！！！！！！！！！！！！！

9.@Action vuex 中的action

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

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

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

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

！！！！！！！！！！！！！！！！！！！！！！！

使用时一定引入修饰器

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

typescript,vue,vue使用typescript,vue中typescript装饰器

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

评论“vue中typescript装饰器的使用方法超实用教程”

暂无评论...

www.wwsws.com 伏龙阁资源网

39,976影音资源

44,792技术资源

21,817软件资源

651,128站长资源

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

昨天有一位朋友在大神群里分享，自己亚服账号被封号之后居然弹出了国服的封号信息对话框。

这里面让他访问的是一个国服的战网网址，com.cn和后面的zh都非常明白地表明这就是国服战网。
而他在复制这个网址并且进行登录之后，确实是网易的网址，也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情，因为以前都没有出现这样的情况，现在突然提示跳转到国服战网的网址，是不是说明了简体中文客户端已经开始进行更新了呢？

更新日志

2024年11月26日

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

简单了解Javscript中兄弟ifream的方法调用

简单学习5种处理Vue.js异常的方法

评论“vue中typescript装饰器的使用方法超实用教程”

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

更新日志

友情链接