vue3+ts深入組件Props實例詳解

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

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

在Vue 3和TypeScript中，深入了解組件的Props是非常重要的。Props是組件之間進行數(shù)據(jù)傳遞的一種方式，可以將數(shù)據(jù)從父組件傳遞給子組件。
首先，在Vue 3中定義Props的方式有所改變。在組件的選項中，我們可以使用props屬性來定義Props的類型和驗證規(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: () => []
    }
  },
  // ...
});

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

在使用Props時，我們可以在子組件中通過props選項來訪問它們。例如：

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

在上面的例子中，我們通過props選項將Props聲明為組件的屬性。然后，在組件的created生命周期鉤子中，我們可以通過this關鍵字來訪問這些Props。

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

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

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

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

傳遞靜態(tài)prop

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

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

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

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

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

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

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

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

在上面的例子中，我們在子組件的created生命周期鉤子中，通過this.message來訪問傳遞的靜態(tài)Props。

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

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

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

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

在父組件中，可以使用v-bind指令來綁定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指令來綁定子組件的count屬性，并將其值綁定到父組件的totalCount變量上。

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

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

在上面的例子中，我們在子組件的created生命周期鉤子中，通過this.count來訪問傳遞的動態(tài)Props。

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

在Vue中，可以通過使用props選項來對Props進行校驗，以確保傳遞給組件的數(shù)據(jù)滿足特定的要求。

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

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

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

在父組件中，如果傳遞的Props不滿足校驗要求，Vue會在控制臺中輸出警告信息。

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

在上面的例子中，我們在父組件中將totalCount設置為-5，這違反了子組件的校驗規(guī)則。

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

您可能感興趣的文章: