vue中typescript裝飾器的使用方法超實用教程

更新時間：2019年06月17日 14:57:26 作者：z_路遙知馬力

這篇文章主要介紹了vue中使用typescript裝飾器的使用方法超實用教程,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下

VueConf ，尤大說， Vue 支持 Ts 了，網上關于 Vue + Ts 的資料有點少，樓主踩了一個星期坑，終于摸明白了修飾器的玩法，下面我們就來玩下 Vue 的 decorator 吧

1，data 值的聲明

在這里 public 聲明的是公有屬性， private 聲明的是私有屬性，私有屬性要帶下劃線

藍色框里的內容是聲明組件，在每個組件創(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 回調函數(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的值