vue3中defineProps詳解

在Vue 3中，defineProps是一個新的API，用于在子組件中定義并接收來自父組件的props。這是Vue 3中組件數(shù)據(jù)傳遞方式的一種改進(jìn)，使得props的聲明和接收更加直觀和明確。

使用方法

defineProps通常在<script setup>標(biāo)簽內(nèi)使用，通過引入并調(diào)用defineProps函數(shù)來定義組件期望接收的props。每個prop都可以指定類型、默認(rèn)值、是否必需等屬性。

下面是一個簡單的示例，展示了如何在Vue 3組件中使用defineProps：

<script setup>
import { defineProps } from 'vue';
// 定義props
const props = defineProps({
  title: {
    type: String,
    required: true,
    default: 'Default Title'
  },
  count: {
    type: Number,
    default: 0
  }
});
</script>
<template>
  <div>
    <h1>{{ title }}</h1>
    <p>Count: {{ count }}</p>
  </div>
</template>

在這個例子中，我們定義了兩個props：title和count。title是一個必需的字符串類型prop，而count是一個可選的數(shù)字類型prop，帶有默認(rèn)值0。在模板中，我們可以直接使用這些props。

原理

defineProps的原理主要基于Vue 3的響應(yīng)式系統(tǒng)和組件系統(tǒng)。當(dāng)你使用defineProps定義props時，Vue會創(chuàng)建一個響應(yīng)式的代理對象，該對象包含了所有定義的props。這個代理對象允許你在組件內(nèi)部訪問和響應(yīng)props的變化。

在組件的渲染過程中，Vue會收集模板中對props的依賴，并在props的值發(fā)生變化時重新計算并更新相關(guān)的DOM。這是通過Vue的響應(yīng)式系統(tǒng)實現(xiàn)的，它能夠在數(shù)據(jù)變化時自動觸發(fā)組件的重新渲染。

此外，defineProps還提供了類型檢查和驗證的功能，確保傳入的props符合組件的期望。如果傳入的props不符合定義的類型或要求，Vue會在開發(fā)模式下發(fā)出警告，幫助開發(fā)者發(fā)現(xiàn)和修復(fù)問題。

總結(jié)起來，defineProps在Vue 3中提供了一種更加直觀和明確的方式來定義和接收props，使得組件之間的數(shù)據(jù)傳遞更加清晰和可維護。同時，結(jié)合Vue的響應(yīng)式系統(tǒng)，它還能夠確保組件在props變化時能夠自動更新和重新渲染。

補充：

Vue3中的defineProps方法

1.什么是defineProps

defineProps是Vue3中的一種新的組件數(shù)據(jù)傳遞方式，可以用于在子組件中定義接收哪些父組件的props。當(dāng)父組件的props發(fā)生變化時，子組件也會隨之響應(yīng)。

2.如何使用defineProps？

在子組件中可以使用defineProps聲明該組件需要接收的props，它需要傳遞一個包含props字段的對象，每個字段表示該props的默認(rèn)值和類型等信息，示例如下：

import { defineComponent, defineProps } from 'vue'
const ChildComponent =<strong> defineComponent</strong>({
  props: defineProps({
    message: {
      type: String,
      default: ''
    },
    count: {
      type: Number,
      default: 0
    }
  }),
  template: `
    <div>
      <p>Message: {{ message }}</p>
      <p>Count: {{ count }}</p>
    </div>
  `
})

在父組件中，只需要通過props的方式向子組件傳遞對應(yīng)的屬性即可，如下：

<template>
  <div>
    <ChildComponent message="Hello, Vue3!" :count="10" />
  </div>
</template>

3.props類型

defineProps支持的主要類型有：

• String
• Number
• Boolean
• Object
• Array
• Function

同時也支持許多高級類型，比如，枚舉類型，對象類型，聯(lián)合類型等等。

import { defineProps } from 'vue'
    const props = defineProps({
      type:{
        type: String,
        validator: (value) => {
          return ['success', 'warning', 'danger', 'info'].includes(value)
        }
      },
      data:{
        type: [Array, Object],
        default: () => {
          return { name: 'jack', age: 20 }
        }
      }
    })

4.props的驗證

我們可以對props進(jìn)行驗證，確保傳入的值符合我們期望的值。

• type：定義數(shù)據(jù)的類型
• required：是否必須
• default：默認(rèn)值
• validator：自定義驗證

import { defineProps } from 'vue'
    const props = defineProps({
      count: {
        type: Number,
        required: true,
        default: 0,
        validator: (value) => {
          return value >= 0 && value <= 10
        }
      }
    })

5.props的命名風(fēng)格

在Vue3中，props的命名風(fēng)格默認(rèn)采用駝峰命名風(fēng)格(CamelCase)。但，如果組件props傳入的命名是kebab-case風(fēng)格時，我們可以通過配置globalProperties實現(xiàn)自動轉(zhuǎn)換。

import { createApp } from 'vue'
    import App from './App.vue'
    
    const app = createApp(App)

    app.config.globalProperties.$options = {
    // 將組件的 props 的 kebab-case 轉(zhuǎn)換為 camelCase
    // 例如 `some-prop` 將被轉(zhuǎn)換為 `someProp`.
      convertProps: true
    }
    
    app.mount('#app')

6.總結(jié)

defineProps方法是Vue3的一個新特性，在組件化開發(fā)時可以方便的定義props并進(jìn)行類型檢查，以確保數(shù)據(jù)流的正確性和可靠性，同時也可以對props進(jìn)行驗證，確保傳入的值符合我們期望的值。同時，在命名風(fēng)格上也有很大的靈活性，可以通過配置實現(xiàn)不同風(fēng)格的轉(zhuǎn)換。

參考---https://www.python100.com/html/YX519T8WHX57.html

參考---https://pythonjishu.com/kpcskqehplrtklq/

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

最新評論