vue-property-decorator基礎教程

土小狗發表於2024-04-30
Vue

vue-property-decorator基礎教程

為什麼要使用vue-property-decorator
如何使用vue-property-decorator
1. 基本寫法
2. data中定義資料
3.生命週期鉤子函式
4. 方法
5. @Component()
6. @Prop()
7. @PropSync()
8. @Emit()
9. 計算屬性
10. @Watch()

為什麼要使用vue-property-decorator
vue-property-decorator是在vue-class-component的基礎上做了進一步的封裝，在TypeScript官方文件 中，官方推薦了vue-class-component，提供了Vue，Component等，而vue-property-decorator是社群出品，深度依賴於vue-class-component，提供了更多運算子：@Component，@Prop，@Watch，@Emit……

vue-property-decorator基礎教程

如何使用vue-property-decorator

1. 基本寫法

template和css的寫法不變，只是script內的寫法需要注意

<script lang='ts'>
import {Component, Vue} from vue-property-decorator;
@Component
export default class App extends Vue {

};
</script>

lang="ts"：script宣告當前語言是ts
@Component：註明此類為一個vue元件
export default class Test extends Vue： export當前元件類是繼承vue的

2. data中定義資料

data中的資料由原來的data()方法改成直接在物件中定義，data內的屬性直接作為例項屬性書寫，預設都是public公有屬性

export default class App extends Vue {
  private msg1 : string = '123';
  private msg2 : number = 1；
}

3.生命週期鉤子函式

export default class App extends Vue {
  private created(){
    this.init();
  }
}

4. 方法

export default class App extends Vue {
  private init(){
    console.log('init');
  }
}

5. @Component()

<script lang="ts">
@Component({
  components: {
    HelloWorld, // 宣告子元件的引用
  }
})
export default class App extends Vue {}
</script>

6. @Prop()

引數可以傳

Constructor 例如String, Number, Boolean
Constructor[], 建構函式的佇列, 型別在這佇列中即可
PropOptions
type 型別不對會報錯 Invalid prop: type check failed for prop “xxx”. Expected Function, got String with value “xxx”.
default 如果父元件沒有傳的話為該值, 注意只能用這一種形式來表示預設值, 不能@Prop() name = 1來表示預設值 1, 雖然看起來一樣, 但是會在 console 裡報錯, 不允許修改 props 中的值
required 沒有會報錯 [Vue warn]: Missing required prop: “xxx”
validator 為一個函式, 引數為傳入的值, 比如(value) => value > 100

@Prop()
propA: string

@Prop()
propB: number

@Prop({
  type: Number,
  validator: (value) => {
    return value > 100;
  },
  required: true
}) private propC!: string // !表示有值, 否則 ts 會告警未初始化


@Prop({ 
  default: 'this is title'，
  required: true
}) propD!: string; // !表示有值, 否則 ts 會告警未初始化

@Prop({ 
  default: true，
  required: true
}) propE: boolean | undefined;

7. @PropSync()

與 Prop 的區別是子元件可以對 props 進行更改, 並同步給父元件
子元件

<template>
  <div>
    <p>{{count}}</p>
    <button @click="innerCount += 1">increment</button>
  </div>
</template>

<script lang="ts">
@Component
export default class PropSyncComponent extends Vue {
  @PropSync('count') private innerCount!: number // 注意@PropSync 裡的引數不能與定義的例項屬性同名, 因為還是那個原理, props 是隻讀的.
}
</script>

父元件：注意父元件裡繫結 props 時需要加修飾符 .sync

<template>
    <PropSyncComponent :count.sync="count"/>
</template>
<script lang="ts">
@Component({
  components: PropSyncComponent
})
export default class PropSyncComponent extends Vue {
  @PropSync('count') private innerCount!: number // 注意@PropSync 裡的引數不能與定義的例項屬性同名, 因為還是那個原理, props 是隻讀的.
}
</script>

8. @Emit()

定義emit事件，引數字串表示分發的事件名，如果沒有，則使用方法名作為分發事件名，會自動轉連字元寫法：

  1. @Emit()不傳引數，那麼它觸發的事件名就是它所修飾的函式名.
  2. @Emit(name: string)，裡面傳遞一個字串，該字串為要觸發的事件名.

js寫法

export default {
  data() {
    return {
      count: 0
    }
  },
  methods: {
    addToCount(n) {
      this.count += n
      this.$emit('add-to-count', n)
    },
    resetCount() {
      this.count = 0
      this.$emit('reset')
    },
    returnValue() {
      this.$emit('return-value', 10)
    },
    promise() {
      const promise = new Promise(resolve => {
        setTimeout(() => {
          resolve(20)
        }, 0)
      })

      promise.then(value => {
        this.$emit('promise', value)
      })
    }
  }
}

ts寫法

檢視程式碼 
 import { Vue, Component, Emit } from 'vue-property-decorator'

@Component
export default class YourComponent extends Vue {
  count = 0

  @Emit()
  addToCount(n: number) {
    this.count += n
  }

  @Emit('reset')
  resetCount() {
    this.count = 0
  }

  @Emit()
  returnValue() {
    return 10
  }

  @Emit()
  promise() {
    return new Promise(resolve => {
      setTimeout(() => {
        resolve(20)
      }, 0)
    })
  }
}

9. 計算屬性

對於Vue中的計算屬性，我們只需要將該計算屬性名定義為一個函式,，在函式前加上get關鍵字即可，原本Vue中的computed裡的每個計算屬性都變成了在字首新增get的函式。

public get computedMsg(){
   return '這裡是計算屬性' + this.message;
}
public set computedMsg(message: string){
}

10. @Watch()

監聽屬性發生更改時被觸發. 可接受配置引數 options

  1. immediate: boolean 是否在偵聽開始之後立即呼叫該函式
  2. deep: boolean 是否深度監聽. 
    import { Vue, Component, Watch } from vue-property-decorator;

export default class App extends Vue {
  @Watch('child')
  onChangeChildValue(newValue: string, oldValue: string){
    ......todo
  }

  @Watch('parent', {immediate: true, deep: false})
  private onChangeParentValue(newValue: string, oldValue: string){
    ......todo
  }
}

相關文章