亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

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

 更新時間：2023年07月04日 11:24:31   作者：陽樹陽樹  
Vue?Property?Decorator提供了一些裝飾器，包括@Prop、@Watch、@Emit、@Inject、@Provide、@Model等等，本文主要來和大家講講它們的使用方法，需要的可以參考一下

Vue Property Decorator

Github 地址：Vue Property Decorator

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

下載

npm i -S vue-property-decorator

使用

Prop

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

比如下面 propA，可以設置為只讀，number 類型，下面的 propB，可以設置默認值

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裝飾器來定義一個名為propC的屬性，并指定了它的類型為string或boolean。
 // [String, Boolean]是一個數(shù)組，表示propC可以是string類型或boolean類型。readonly表示這個屬性是只讀的，不能在組件內(nèi)部修改它的值。
 // propC: string | boolean
 // 表示這個屬性的類型是string或boolean，也就是說，它的值可以是string類型或boolean類型。
 // 這樣定義propC的好處是，當propC被傳入組件時，Vue會自動根據(jù)它的類型進行類型檢查，確保它的值符合預期。
?@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ù)變化。當被監(jiān)聽的數(shù)據(jù)發(fā)生變化時，這個方法就會被調(diào)用，并且會傳入兩個參數(shù)：新值和舊值。

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

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() {}
}

相當于：

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

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

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

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

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

<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>

在這個例子中，我們在父組件中使用 @click 指令來監(jiān)聽 MyComponent 組件的自定義事件，并且在父組件中定義了一個名為 handleClick 的方法來處理這個事件。當 MyComponent 組件觸發(fā)自定義事件時，這個事件會被傳遞給父組件的 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 的，比如我們像如下使用，對于第一個 @Ref() readonly anotherComponent!: AnotherComponent，我們的含義是這個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
}

相當于

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

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

相關文章

最新評論