vue3中defineProps詳解

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

使用方法

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

下面是一個(gè)簡(jiǎ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>

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

原理

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

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

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

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

補(bǔ)充：

Vue3中的defineProps方法

1.什么是defineProps

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

2.如何使用defineProps？

在子組件中可以使用defineProps聲明該組件需要接收的props，它需要傳遞一個(gè)包含props字段的對(duì)象，每個(gè)字段表示該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>
  `
})

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

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

3.props類型

defineProps支持的主要類型有：

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

同時(shí)也支持許多高級(jí)類型，比如，枚舉類型，對(duì)象類型，聯(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的驗(yàn)證

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

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

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)格時(shí)，我們可以通過(guò)配置globalProperties實(shí)現(xiàn)自動(dòng)轉(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的一個(gè)新特性，在組件化開(kāi)發(fā)時(shí)可以方便的定義props并進(jìn)行類型檢查，以確保數(shù)據(jù)流的正確性和可靠性，同時(shí)也可以對(duì)props進(jìn)行驗(yàn)證，確保傳入的值符合我們期望的值。同時(shí)，在命名風(fēng)格上也有很大的靈活性，可以通過(guò)配置實(shí)現(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)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論