快捷導(dǎo)航

vue3+ts深入組件Props實(shí)例詳解

更新時(shí)間：2023年09月02日 10:49:51 作者：一花一world

Props是組件之間進(jìn)行數(shù)據(jù)傳遞的一種方式，可以將數(shù)據(jù)從父組件傳遞給子組件，這篇文章主要介紹了vue3+ts深入組件Props的實(shí)例詳解,需要的朋友可以參考下

在Vue 3和TypeScript中，深入了解組件的Props是非常重要的。Props是組件之間進(jìn)行數(shù)據(jù)傳遞的一種方式，可以將數(shù)據(jù)從父組件傳遞給子組件。
首先，在Vue 3中定義Props的方式有所改變。在組件的選項(xiàng)中，我們可以使用props屬性來(lái)定義Props的類型和驗(yàn)證規(guī)則。例如：

import { defineComponent, PropType } from 'vue';
export default defineComponent({
  props: {
    // 基本類型的Props
    name: {
      type: String,
      required: true
    },
    age: {
      type: Number,
      default: 18
    },
    // 自定義類型的Props
    person: {
      type: Object as PropType<{ name: string, age: number }>,
      required: true
    },
    // 數(shù)組類型的Props
    hobbies: {
      type: Array as PropType<string[]>,
      default: () => []
    }
  },
  // ...
});

在上面的例子中，我們定義了幾個(gè)不同類型的Props。name是一個(gè)必需的字符串類型的Props，age是一個(gè)可選的數(shù)字類型的Props，默認(rèn)值為18。person是一個(gè)必需的自定義類型的Props，它是一個(gè)包含name和age屬性的對(duì)象。hobbies是一個(gè)可選的數(shù)組類型的Props，默認(rèn)值為空數(shù)組。

在使用Props時(shí)，我們可以在子組件中通過(guò)props選項(xiàng)來(lái)訪問(wèn)它們。例如：

import { defineComponent } from 'vue';
export default defineComponent({
  props: ['name', 'age', 'person', 'hobbies'],
  // ...
  created() {
    console.log(this.name); // 訪問(wèn)字符串類型的Props
    console.log(this.age); // 訪問(wèn)數(shù)字類型的Props
    console.log(this.person); // 訪問(wèn)自定義類型的Props
    console.log(this.hobbies); // 訪問(wèn)數(shù)組類型的Props
  }
});

在上面的例子中，我們通過(guò)props選項(xiàng)將Props聲明為組件的屬性。然后，在組件的created生命周期鉤子中，我們可以通過(guò)this關(guān)鍵字來(lái)訪問(wèn)這些Props。

此外，還可以使用TypeScript的類型注解來(lái)提供Props的類型檢查。例如：

import { defineComponent } from 'vue';
interface Person {
  name: string;
  age: number;
}
export default defineComponent({
  props: {
    person: {
      type: Object as () => Person,
      required: true
    }
  },
  // ...
});

在上面的例子中，我們使用了TypeScript的接口來(lái)定義Person類型，并在props選項(xiàng)中使用了類型注解來(lái)指定person的類型為Person。

總結(jié)一下，在Vue 3和TypeScript中，我們可以使用props選項(xiàng)來(lái)定義和驗(yàn)證組件的Props?？梢允褂貌煌愋偷腜rops，包括基本類型、自定義類型和數(shù)組類型。在子組件中，可以通過(guò)props選項(xiàng)來(lái)訪問(wèn)這些Props，并使用TypeScript的類型注解來(lái)提供類型檢查。這樣可以更安全和可靠地進(jìn)行組件間的數(shù)據(jù)傳遞。

傳遞靜態(tài)prop

在Vue 3和TypeScript中，如果要傳遞靜態(tài)的Props，可以在父組件中直接在子組件的標(biāo)簽上使用Props的語(yǔ)法來(lái)傳遞靜態(tài)值。

例如，假設(shè)我們有一個(gè)子組件ChildComponent，它有一個(gè)接受字符串類型的Props message。

import { defineComponent, PropType } from 'vue';
export default defineComponent({
  props: {
    message: {
      type: String,
      required: true
    }
  },
  // ...
});

在父組件中，可以在子組件的標(biāo)簽上使用Props的語(yǔ)法來(lái)傳遞靜態(tài)值。

<template>
  <div>
    <child-component message="Hello, World!"></child-component>
  </div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
  components: {
    ChildComponent
  }
};
</script>

在上面的例子中，我們?cè)?code>ChildComponent的標(biāo)簽上使用message屬性，并傳遞了靜態(tài)的字符串值"Hello, World!"。

在子組件中，可以通過(guò)props選項(xiàng)來(lái)接收傳遞的靜態(tài)Props。

import { defineComponent } from 'vue';
export default defineComponent({
  props: ['message'],
  // ...
  created() {
    console.log(this.message); // 輸出：Hello, World!
  }
});

在上面的例子中，我們?cè)谧咏M件的created生命周期鉤子中，通過(guò)this.message來(lái)訪問(wèn)傳遞的靜態(tài)Props。

傳遞非字符串類型，使用v-bind

如果要傳遞非字符串類型的Props，并且希望使用動(dòng)態(tài)的值，可以使用v-bind指令來(lái)綁定Props。

例如，假設(shè)我們有一個(gè)子組件ChildComponent，它有一個(gè)接受數(shù)字類型的Props count。

import { defineComponent, PropType } from 'vue';
export default defineComponent({
  props: {
    count: {
      type: Number,
      required: true
    }
  },
  // ...
});

在父組件中，可以使用v-bind指令來(lái)綁定Props的值。

<template>
  <div>
    <child-component :count="totalCount"></child-component>
  </div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      totalCount: 10
    };
  }
};
</script>

在上面的例子中，我們使用v-bind指令來(lái)綁定子組件的count屬性，并將其值綁定到父組件的totalCount變量上。

在子組件中，可以通過(guò)props選項(xiàng)來(lái)接收傳遞的動(dòng)態(tài)Props。

import { defineComponent } from 'vue';
export default defineComponent({
  props: ['count'],
  // ...
  created() {
    console.log(this.count); // 輸出：10
  }
});

在上面的例子中，我們?cè)谧咏M件的created生命周期鉤子中，通過(guò)this.count來(lái)訪問(wèn)傳遞的動(dòng)態(tài)Props。

prop校驗(yàn)，單向數(shù)據(jù)流

在Vue中，可以通過(guò)使用props選項(xiàng)來(lái)對(duì)Props進(jìn)行校驗(yàn)，以確保傳遞給組件的數(shù)據(jù)滿足特定的要求。

例如，假設(shè)我們有一個(gè)子組件ChildComponent，它有一個(gè)接受數(shù)字類型的Props count，并且要求傳遞的值必須大于0。

import { defineComponent, PropType } from 'vue';
export default defineComponent({
  props: {
    count: {
      type: Number,
      required: true,
      validator: (value: number) => value > 0
    }
  },
  // ...
});

在上面的例子中，我們?cè)?code>props選項(xiàng)中定義了count屬性，并指定了它的類型為Number，并且設(shè)置了required: true，表示這個(gè)Props是必需的。同時(shí)，我們還使用了一個(gè)自定義的校驗(yàn)函數(shù)validator，該函數(shù)接受傳遞的值作為參數(shù)，返回一個(gè)布爾值，用于校驗(yàn)傳遞的值是否滿足要求。

在父組件中，如果傳遞的Props不滿足校驗(yàn)要求，Vue會(huì)在控制臺(tái)中輸出警告信息。

<template>
  <div>
    <child-component :count="totalCount"></child-component>
  </div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      totalCount: -5
    };
  }
};
</script>

在上面的例子中，我們?cè)诟附M件中將totalCount設(shè)置為-5，這違反了子組件的校驗(yàn)規(guī)則。

到此這篇關(guān)于vue3+ts深入組件Props實(shí)例詳解的文章就介紹到這了,更多相關(guān)vue3+ts深入組件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: