vue中typescript裝飾器的使用方法超實用教程
VueConf ,尤大說, Vue 支持 Ts 了,網(wǎng)上關(guān)于 Vue + Ts 的資料有點少, 樓主踩了一個星期坑,終于摸明白了 修飾器 的玩法,下面我們就來玩下 Vue 的 decorator 吧
1,data 值的聲明
在這里 public 聲明的是公有屬性, private 聲明的是私有屬性,私有屬性要帶 下劃線
藍色框里的內(nèi)容是聲明組件,在每個組件創(chuàng)建時都要帶上, Components 中的寫法如下
上面是 普通寫法 ,下面是 懶加載寫法
2.@Prop 父組件傳值給子組件
父組件使用 v-bind 傳遞與js版本一樣,在父組件接受是使用修飾器
@Prop({type:‘類型'})
readonly:傳遞的參數(shù)名稱!:類型
一定要寫全,不然后報錯,也可以寫個 接口 約束 類型
3.@Emit 子組件給父組件傳值
@Emit('傳給父組件的值')
callback
父組件接收與 js 版本一致
4.@Provide @Inject 混入
這個沒什么說的, @Provide 聲明一個值 , 在其他地方用 @Inject 接收
5.@Model 雙向綁定
這個也很簡單,v-model綁定一個值,在子組件使用 @Model('頁面展示的值') 值類型
這里我偷懶,聲明一樣的 (手動笑哭)
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 一致
?。。。。。。。。。。。。⌒枰⒁獾氖且獙懸粋€接口 將state里面的數(shù)據(jù)類型寫進去,如果直接用
state編輯器會報錯 , 當(dāng)然聲明any類型也是可以的, 但是用了Ts還是盡量不要用any吧
?。。。。。。。。。。。。。。。。。。。?/p>
9.@Action vuex 中的action
@Action('action里的方法名') 頁面展示的方法
?。。。。。。。?nbsp; 由于異步,需要加async await 不然會一直處在padding狀態(tài),
使用promise也是可以的 ?。。。。。。。。。。。。。?!
至于 vue.config.js 網(wǎng)上很多方法,有興趣的可以去找下,在這里貼下自己的
?。。。。。。。。。。。。。。。。。。。。。?!
使用時一定引入修飾器
以上就是小編給大家姐的vue中typescript裝飾器的使用方法超實用教程,希望對大家有所幫助,如果大家有任何疑問歡迎給我留言,小編會及時回復(fù)大家的!
相關(guān)文章
Ant Design Vue resetFields表單重置不生效問題及解決
這篇文章主要介紹了Ant Design Vue resetFields 表單重置不生效問題及解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-06-06