[vue中使用typescript] 超實用教程

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 + Ts 修飾器的基本使用方法了，但願能幫助你們更快速的入門