Vue中裝飾器的使用示例詳解

更新時(shí)間：2023年07月04日 11:24:31 作者：陽樹陽樹

Vue?Property?Decorator提供了一些裝飾器，包括@Prop、@Watch、@Emit、@Inject、@Provide、@Model等等，本文主要來和大家講講它們的使用方法，需要的可以參考一下

Vue Property Decorator

Vue Property Decorator提供了一些裝飾器，包括@Prop、@Watch、@Emit、@Inject、@Provide、@Model等等。這些裝飾器可以幫助你更方便地定義組件的屬性、監(jiān)聽屬性的變化、觸發(fā)事件、注入依賴、提供依賴等等。

下載

npm i -S vue-property-decorator

使用

Prop

使用 Prop 可以快速地讓你設(shè)置你的傳入屬性。

比如下面 propA，可以設(shè)置為只讀，number 類型，下面的 propB，可以設(shè)置默認(rèn)值

import { Vue, Component, Prop } from 'vue-property-decorator';  
@Component  
export default class MyComponent extends Vue {  
?@Prop(Number) readonly propA!: number;  
?@Prop({ default: 'default value' }) readonly propB!: string; 
 // 這行代碼使用了@Prop裝飾器來定義一個(gè)名為propC的屬性，并指定了它的類型為string或boolean。
 // [String, Boolean]是一個(gè)數(shù)組，表示propC可以是string類型或boolean類型。readonly表示這個(gè)屬性是只讀的，不能在組件內(nèi)部修改它的值。
 // propC: string | boolean
 // 表示這個(gè)屬性的類型是string或boolean，也就是說，它的值可以是string類型或boolean類型。
 // 這樣定義propC的好處是，當(dāng)propC被傳入組件時(shí)，Vue會自動根據(jù)它的類型進(jìn)行類型檢查，確保它的值符合預(yù)期。
?@Prop([String, Boolean]) readonly propC: string | boolean;  
}

等同于：

export default {
  props: {
    propA: {
      type: Number,
    },
    propB: {
      default: 'default value',
    },
    propC: {
      type: [String, Boolean],
    },
  },
}

Watch

@Watch 裝飾器可以用于類中的方法上，用于監(jiān)聽指定的數(shù)據(jù)變化。當(dāng)被監(jiān)聽的數(shù)據(jù)發(fā)生變化時(shí)，這個(gè)方法就會被調(diào)用，并且會傳入兩個(gè)參數(shù)：新值和舊值。

例如，我們可以使用 @Watch 裝飾器來監(jiān)聽 child 這個(gè)屬性的變化，如下所示：

import { Vue, Component, Watch } from 'vue-property-decorator'
@Component
export default class YourComponent extends Vue {
  @Watch('child')
  onChildChanged(val: string, oldVal: string) {}
  @Watch('person', { immediate: true, deep: true })
  onPersonChanged1(val: Person, oldVal: Person) {}
  @Watch('person')
  onPersonChanged2(val: Person, oldVal: Person) {}
  @Watch('person')
  @Watch('child')
  onPersonAndChildChanged() {}
}

相當(dāng)于：

export default {
  watch: {
    child: [
      {
        handler: 'onChildChanged',
        immediate: false,
        deep: false,
      },
      {
        handler: 'onPersonAndChildChanged',
        immediate: false,
        deep: false,
      },
    ],
    person: [
      {
        handler: 'onPersonChanged1',
        immediate: true,
        deep: true,
      },
      {
        handler: 'onPersonChanged2',
        immediate: false,
        deep: false,
      },
      {
        handler: 'onPersonAndChildChanged',
        immediate: false,
        deep: false,
      },
    ],
  },
  methods: {
    onChildChanged(val, oldVal) {},
    onPersonChanged1(val, oldVal) {},
    onPersonChanged2(val, oldVal) {},
    onPersonAndChildChanged() {},
  },
}

Emit

當(dāng)一個(gè) Vue 組件需要與其它組件進(jìn)行通信時(shí)，可以使用 emit 方法來觸發(fā)自定義事件。emit 方法接收兩個(gè)參數(shù)：第一個(gè)參數(shù)是自定義事件的名稱，第二個(gè)參數(shù)是傳遞給父組件的數(shù)據(jù)。

父組件可以通過 v-on 指令監(jiān)聽這個(gè)自定義事件，并且在父組件中定義一個(gè)方法來處理這個(gè)事件。在 vue-property-decorator 中，可以使用 @Emit 裝飾器來定義組件的自定義事件。@Emit 裝飾器可以用于方法上，將這個(gè)方法標(biāo)記為組件的自定義事件。在這個(gè)方法中，可以通過 return 語句來返回需要傳遞給父組件的數(shù)據(jù)。例如：

import { Component, Vue, Emit } from 'vue-property-decorator';
@Component
export default class MyComponent extends Vue {
  @Emit()
  handleClick() {
    return 'hello';
  }
}

在這個(gè)例子中，我們定義了一個(gè)名為 handleClick 的方法，并且使用 @Emit 裝飾器將它標(biāo)記為組件的自定義事件。當(dāng)這個(gè)方法被調(diào)用時(shí)，它會返回一個(gè)字符串 'hello'，這個(gè)字符串會被傳遞給父組件。在父組件中，可以使用 v-on 指令來監(jiān)聽這個(gè)自定義事件，并且在父組件中定義一個(gè)方法來處理這個(gè)事件。例如：

<template>
  <div>
    <my-component @click="handleClick"></my-component>
  </div>
</template>
<script>
import MyComponent from './MyComponent.vue';
export default {
  components: {
    MyComponent,
  },
  methods: {
    handleClick(data) {
      console.log(data); // 輸出 'hello'
    },
  },
};
</script>

在這個(gè)例子中，我們在父組件中使用 @click 指令來監(jiān)聽 MyComponent 組件的自定義事件，并且在父組件中定義了一個(gè)名為 handleClick 的方法來處理這個(gè)事件。當(dāng) MyComponent 組件觸發(fā)自定義事件時(shí)，這個(gè)事件會被傳遞給父組件的 handleClick 方法，并且傳遞的數(shù)據(jù)是 'hello'。

更普遍的用法：

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()
  onInputChange(e) {
    return e.target.value
  }
  @Emit()
  promise() {
    return new Promise((resolve) => {
      setTimeout(() => {
        resolve(20)
      }, 0)
    })
  }
}

上述寫法等同于：

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)
    },
    onInputChange(e) {
      this.$emit('on-input-change', e.target.value, e)
    },
    promise() {
      const promise = new Promise((resolve) => {
        setTimeout(() => {
          resolve(20)
        }, 0)
      })
      promise.then((value) => {
        this.$emit('promise', value)
      })
    },
  },
}

Ref

@Ref 是用來獲取其他組件的 Ref 的，比如我們像如下使用，對于第一個(gè) @Ref() readonly anotherComponent!: AnotherComponent，我們的含義是這個(gè)ref是只讀的，并且是從this.$refs的anotherComponet上拿到的值，而@Ref('aButton') readonly button!: HTMLButtonElement，則是制定了我們的this.$refs后面的訪問值為aButton。

例子：

import { Vue, Component, Ref } from 'vue-property-decorator'
import AnotherComponent from '@/path/to/another-component.vue'
@Component
export default class YourComponent extends Vue {
  @Ref() readonly anotherComponent!: AnotherComponent
  @Ref('aButton') readonly button!: HTMLButtonElement
}

相當(dāng)于

export default {
  computed() {
    anotherComponent: {
      cache: false,
      get() {
        return this.$refs.anotherComponent as AnotherComponent
      }
    },
    button: {
      cache: false,
      get() {
        return this.$refs.aButton as HTMLButtonElement
      }
    }
  }
}

以上就是Vue中裝飾器的使用示例詳解的詳細(xì)內(nèi)容，更多關(guān)于Vue裝飾器的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: