vue中typescript裝飾器的使用方法超實(shí)用教程

VueConf ，尤大說(shuō)， Vue 支持 Ts 了，網(wǎng)上關(guān)于 Vue + Ts 的資料有點(diǎn)少， 樓主踩了一個(gè)星期坑，終于摸明白了 修飾器 的玩法，下面我們就來(lái)玩下 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è)沒(méi)什么說(shuō)的， @Provide 聲明一個(gè)值 , 在其他地方用 @Inject 接收

5.@Model 雙向綁定

這個(gè)也很簡(jiǎn)單，v-model綁定一個(gè)值，在子組件使用 @Model('頁(yè)面展示的值') 值類型

這里我偷懶，聲明一樣的 (手動(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ù)) 頁(yè)面展示的值

?。。。。?！ 注意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吧  

    ?。。。。。。。。。。。。。。。。。。。?/p>

9.@Action vuex 中的action

@Action('action里的方法名') 頁(yè)面展示的方法

?。。。。。。。?nbsp; 由于異步,需要加async await 不然會(huì)一直處在padding狀態(tài),

 使用promise也是可以的            ?。。。。。。。。。。。。。。?/p>

至于 vue.config.js 網(wǎng)上很多方法，有興趣的可以去找下，在這里貼下自己的

      ?。。。。。。。。。。。。。。。。。。。。。?！

       使用時(shí)一定引入修飾器  

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com