vue中typescript裝飾器的使用方法超實(shí)用教程
VueConf ,尤大說, Vue 支持 Ts 了,網(wǎng)上關(guān)于 Vue + Ts 的資料有點(diǎn)少, 樓主踩了一個(gè)星期坑,終于摸明白了 修飾器 的玩法,下面我們就來玩下 Vue 的 decorator 吧
1,data 值的聲明
在這里 public 聲明的是公有屬性, private 聲明的是私有屬性,私有屬性要帶 下劃線
藍(lán)色框里的內(nèi)容是聲明組件,在每個(gè)組件創(chuàng)建時(shí)都要帶上, Components 中的寫法如下
上面是 普通寫法 ,下面是 懶加載寫法
2.@Prop 父組件傳值給子組件
父組件使用 v-bind 傳遞與js版本一樣,在父組件接受是使用修飾器
@Prop({type:‘類型'})
readonly:傳遞的參數(shù)名稱!:類型
一定要寫全,不然后報(bào)錯(cuò),也可以寫個(gè) 接口 約束 類型
3.@Emit 子組件給父組件傳值
@Emit('傳給父組件的值')
callback
父組件接收與 js 版本一致
4.@Provide @Inject 混入
這個(gè)沒什么說的, @Provide 聲明一個(gè)值 , 在其他地方用 @Inject 接收
5.@Model 雙向綁定
這個(gè)也很簡單,v-model綁定一個(gè)值,在子組件使用 @Model('頁面展示的值') 值類型
這里我偷懶,聲明一樣的 (手動(dòng)笑哭)
5.@Watch 監(jiān)聽函數(shù)
@Watch('監(jiān)聽的值',{深度監(jiān)聽})
callback 回調(diào)函數(shù)
6.鉤子函數(shù)的聲明
與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數(shù)據(jù)里的參數(shù)) 頁面展示的值
?。。。。?! 注意vuex的數(shù)據(jù)都要在鉤子函數(shù)里 調(diào)用 ?。。。。。。。。。。。。?!
8.@Mutation vuex中的mutation
使用與 @State 一致
!?。。。。。。。。。。?!需要注意的是要寫一個(gè)接口 將state里面的數(shù)據(jù)類型寫進(jìn)去,如果直接用
state編輯器會(huì)報(bào)錯(cuò) , 當(dāng)然聲明any類型也是可以的, 但是用了Ts還是盡量不要用any吧
?。。。。。。。。。。。。。。。。。。?!
9.@Action vuex 中的action
@Action('action里的方法名') 頁面展示的方法
?。。。。。。?! 由于異步,需要加async await 不然會(huì)一直處在padding狀態(tài),
使用promise也是可以的 !?。。。。。。。。。。。。。?/p>
至于 vue.config.js 網(wǎng)上很多方法,有興趣的可以去找下,在這里貼下自己的
?。。。。。。。。。。。。。。。。。。。。。?!
使用時(shí)一定引入修飾器
以上就是小編給大家姐的vue中typescript裝飾器的使用方法超實(shí)用教程,希望對(duì)大家有所幫助,如果大家有任何疑問歡迎給我留言,小編會(huì)及時(shí)回復(fù)大家的!
相關(guān)文章
vue3+koa實(shí)現(xiàn)文件上傳功能的全過程記錄
開發(fā)項(xiàng)目的時(shí)候,用到文件上傳的功能很常見,包括單文件上傳和多文件上傳,下面這篇文章主要給大家介紹了關(guān)于vue3+koa實(shí)現(xiàn)文件上傳功能的相關(guān)資料,需要的朋友可以參考下2023-01-01Vue3實(shí)現(xiàn)動(dòng)態(tài)面包屑的代碼示例
這篇文章主要給大家介紹一下Vue3動(dòng)態(tài)面包屑是如何實(shí)現(xiàn)的,實(shí)現(xiàn)思路又是什么,以及發(fā)給大家介紹一下面包屑的功能,文章通過代碼示例介紹的非常詳細(xì),需要的朋友可以參考下2023-07-07vue實(shí)現(xiàn)會(huì)議室拖拽布局排座功能
vue-draggable-resizable-gorkys是一更強(qiáng)大的拖拽組件,可以隨意拖拽,有點(diǎn)坐標(biāo),會(huì)議室拖拽布局排座是vue-draggable結(jié)合vue-draggable-resizable-gorkys進(jìn)行開發(fā)的,本文重點(diǎn)給大家介紹vue實(shí)現(xiàn)會(huì)議室拖拽布局排座,感興趣的朋友一起看看吧2023-11-11Ant Design Vue resetFields表單重置不生效問題及解決
這篇文章主要介紹了Ant Design Vue resetFields 表單重置不生效問題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-06-06vue實(shí)現(xiàn)標(biāo)簽云效果的示例
這篇文章主要介紹了vue實(shí)現(xiàn)標(biāo)簽云效果的示例,幫助大家更好的理解和使用vue框架,感興趣的朋友可以了解下2020-11-11