vue-property-decorator用法詳解
vue-property-decorator
這個組件完全依賴于vue-class-component.它具備以下幾個屬性:
- @Component (完全繼承于vue-class-component)
- @Emit
- @Inject
- @Provice
- @Prop
- @Watch
- @Model
- Mixins (在vue-class-component中定義);
使用
當我們在vue單文件中使用TypeScript時,引入vue-property-decorator之后,script中的標簽就變?yōu)檫@樣:
<script lang="ts">
import {Vue, Component} from 'vue-property-decorator';
@Component({})
export default class "組件名" extends Vue{
ValA: string = "hello world";
ValB: number = 1;
}
</script>
等同于
<script lang="es6">
import Vue from 'vue';
export default {
data(){
return {
ValA: 'hello world',
ValB: 1
}
}
}
</script>
總結: 對于data里的變量對頂,我們可以直接按ts定義類變量的寫法寫就可以
那么如果是計算屬性呢? 這就要用到getter了.
<script lang="ts">
import {Vue, Component} from 'vue-property-decorator';
@Component({})
export default class "組件名" extends Vue{
get ValA(){
return 1;
}
}
</script>
等同于
<script lang="es6">
import Vue from 'vue';
export default {
computed: {
ValA: function() {
return 1;
}
}
}
</script>
總結: 對于Vue中的計算屬性,我們只需要將該計算屬性名定義為一個函數,并在函數前加上get關鍵字即可.
原本Vue中的computed里的每個計算屬性都變成了在前綴添加get的函數.
@Emit
關于Vue中的事件的監(jiān)聽與觸發(fā),Vue提供了兩個函數$emit和$on.那么在vue-property-decorator中如何使用呢?
這就需要用到vue-property-decorator提供的@Emit屬性.
<script lang="ts">
import {Vue, Component, Emit} from 'vue-property-decorator';
@Component({})
export default class "組件名" extends Vue{
mounted(){
this.$on('emit-todo', function(n) {
console.log(n)
})
this.emitTodo('world');
}
@Emit()
emitTodo(n: string){
console.log('hello');
}
}
</script>
運行上面的代碼會打印 'hello' 'world', 為什么呢? 讓我們來看看它等同于什么
<script lang="es6">
import Vue from 'vue';
export default {
mounted(){
this.$on('emit-todo', function(n) {
console.log(n)
})
this.emitTodo('world');
},
methods: {
emitTodo(n){
console.log('hello');
this.$emit('emit-todo', n);
}
}
}
</script>
可以看到,在@Emit裝飾器的函數會在運行之后觸發(fā)等同于其函數名(駝峰式會轉為橫杠式寫法)的事件, 并將其函數傳遞給$emit.
如果我們想觸發(fā)特定的事件呢,比如在emitTodo下觸發(fā)reset事件:
<script lang="ts">
import {Vue, Component, Emit} from 'vue-property-decorator';
@Component({})
export default class "組件名" extends Vue{
@Emit('reset')
emitTodo(n: string){
}
}
</script>
我們只需要給裝飾器@Emit傳遞一個事件名參數reset,這樣函數emitTodo運行之后就會觸發(fā)reset事件.
總結:在Vue中我們是使用$emit觸發(fā)事件,使用vue-property-decorator時,可以借助@Emit裝飾器來實現(xiàn).@Emit修飾的函數所接受的參數會在運行之后觸發(fā)事件的時候傳遞過去.
@Emit觸發(fā)事件有兩種寫法
- @Emit()不傳參數,那么它觸發(fā)的事件名就是它所修飾的函數名.
- @Emit(name: string),里面?zhèn)鬟f一個字符串,該字符串為要觸發(fā)的事件名.
@Watch
我們可以利用vue-property-decorator提供的@Watch裝飾器來替換Vue中的watch屬性,以此來監(jiān)聽值的變化.
在Vue中監(jiān)聽器的使用如下:
export default{
watch: {
'child': this.onChangeValue
// 這種寫法默認 `immediate`和`deep`為`false`
,
'person': {
handler: 'onChangeValue',
immediate: true,
deep: true
}
},
methods: {
onChangeValue(newVal, oldVal){
// todo...
}
}
}
那么我們如何使用@Watch裝飾器來改造它呢?
import {Vue, Component, Watch} from 'vue-property-decorator';
@Watch('child')
onChangeValue(newVal: string, oldVal: string){
// todo...
}
@Watch('person', {immediate: true, deep: true})
onChangeValue(newVal: Person, oldVal: Person){
// todo...
}
總結: @Watch使用非常簡單,接受第一個參數為要監(jiān)聽的屬性名 第二個屬性為可選對象.@Watch所裝飾的函數即監(jiān)聽到屬性變化之后的操作.
@Prop
我們在使用Vue時有時會遇到子組件接收父組件傳遞來的參數.我們需要定義Prop屬性.
比如子組件從父組件接收三個屬性propA,propB,propC.
- propA類型為Number
- propB默認值為default value
- propC類型為String或者Boolean
export default {
props: {
propA: {
type: Number
},
propB: {
default: 'default value'
},
propC: {
type: [String, Boolean]
},
}
}
我們使用vue-property-decorator提供的@Prop可以將上面的代碼改造為如下:
<script lang="ts">
import {Vue, Component, Prop} from 'vue-property-decorator';
@Component({})
export default class "組件名" extends Vue{
@Prop(Number) propA!: number;
@Prop({default: 'default value'}) propB!: string;
@propC([String, Boolean]) propC: string | boolean;
}
</script>
這里 !和可選參數?是相反的, !告訴TypeScript我這里一定有值.
總結: @Prop接受一個參數可以是類型變量或者對象或者數組.@Prop接受的類型比如Number是JavaScript的類型,之后定義的屬性類型則是TypeScript的類型.
Mixins
在使用Vue進行開發(fā)時我們經常要用到混合,結合TypeScript之后我們有兩種mixins的方法.
一種是vue-class-component提供的.
//定義要混合的類 mixins.ts
import Vue from 'vue';
import Component from 'vue-class-component';
@Component // 一定要用Component修飾
export default class myMixins extends Vue {
value: string = "Hello"
}
// 引入
import Component {mixins} from 'vue-class-component';
import myMixins from 'mixins.ts';
@Component
export class myComponent extends mixins(myMixins) {
// 直接extends myMinxins 也可以正常運行
created(){
console.log(this.value) // => Hello
}
}
第二種方式是在@Component中混入.
我們改造一下mixins.ts,定義vue/type/vue模塊,實現(xiàn)Vue接口
// mixins.ts
import { Vue, Component } from 'vue-property-decorator';
declare module 'vue/types/vue' {
interface Vue {
value: string;
}
}
@Component
export default class myMixins extends Vue {
value: string = 'Hello'
}
混入
import { Vue, Component, Prop } from 'vue-property-decorator';
import myMixins from '@static/js/mixins';
@Component({
mixins: [myMixins]
})
export default class myComponent extends Vue{
created(){
console.log(this.value) // => Hello
}
}
總結: 兩種方式不同的是在定義mixins時如果沒有定義vue/type/vue模塊, 那么在混入的時候就要繼承該mixins; 如果定義vue/type/vue模塊,在混入時可以在@Component中mixins直接混入.
@Model
Vue組件提供model: {prop?: string, event?: string}讓我們可以定制prop和event.
默認情況下，一個組件上的v-model 會把 value用作 prop且把 input用作 event，但是一些輸入類型比如單選框和復選框按鈕可能想使用 value prop來達到不同的目的。使用model選項可以回避這些情況產生的沖突。
下面是Vue官網的例子
Vue.component('my-checkbox', {
model: {
prop: 'checked',
event: 'change'
},
props: {
// this allows using the `value` prop for a different purpose
value: String,
// use `checked` as the prop which take the place of `value`
checked: {
type: Number,
default: 0
}
},
// ...
})
<my-checkbox v-model="foo" value="some value"></my-checkbox>
上述代碼相當于：
<my-checkbox
:checked="foo"
@change="val => { foo = val }"
value="some value">
</my-checkbox>
即foo雙向綁定的是組件的checke, 觸發(fā)雙向綁定數值的事件是change
使用vue-property-decorator提供的@Model改造上面的例子.
import { Vue, Component, Model} from 'vue-property-decorator';
@Component
export class myCheck extends Vue{
@Model ('change', {type: Boolean}) checked!: boolean;
}
總結, @Model()接收兩個參數, 第一個是event值, 第二個是prop的類型說明, 與@Prop類似, 這里的類型要用JS的. 后面在接著是prop和在TS下的類型說明.
暫時常用的就這幾個,還有@Provice和@Inject等用到了再寫.
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了Vue使用el-dialog關閉后重置表單方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-02-02
這篇文章給大家介紹了使用vue-cli導入Element UI組件的方法，非常不錯，具有一定的參考借鑒價值，需要的朋友一起看看吧2018-05-05
這篇文章主要介紹了VUE中的打包刪除文件、圖片的HASH碼，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
vue2.0結合DataTable插件實現(xiàn)表格動態(tài)刷新的方法詳解
這篇文章主要介紹了vue2.0結合DataTable插件實現(xiàn)表格動態(tài)刷新的方法,結合具體項目實例形式分析了vue2.0結合DataTable插件實現(xiàn)表格動態(tài)刷新過程中遇到的問題與相應的解決方法,需要的朋友可以參考下2017-03-03
這篇文章主要介紹了vue-cli項目中遇到的eslint的坑及解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
eslint是一個JavaScript的校驗插件,通常用來校驗語法或代碼的書寫風格,下面這篇文章主要給大家介紹了關于Vscode關閉Eslint語法檢查的多種方式,文章通過圖文介紹的非常詳細,需要的朋友可以參考下2022-07-07
圖片和文件上傳在很多項目中都可以使用的到，本文主要介紹了VUE+element-ui文件上傳的示例代碼，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
這篇文章主要介紹了vant組件中 dialog的確認按鈕的回調事件操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
這篇文章主要介紹了vue監(jiān)聽dom大小改變案例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
今天小編就為大家分享一篇Vue模擬數據,實現(xiàn)路由進入商品詳情頁面的示例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08