Vue.js 給出 Props 概念-Golang-PHP中文網

Vue.js 給出 Props 概念

Linda Hamilton

發布： 2024-10-17 06:08:29

原創

827 人瀏覽過

你好！ Props 是 Vue.js 最需要的部分之一，它們允許元件之間交換資訊。使用 props 是在 setup 函數內部完成的。以下是道具我們可以詳細了解如何使用：

Vue.js da Props tushunchasi

定義道具： DefineProps 函數用來定義 Vue.js 中的 props。 DefineProps 物件用於定義 props 的類型和屬性。

<template>
  <div>
    <h1>{{ title }}</h1>
    <p>{{ message }}</p>
  </div>
</template>

<script setup>
import { defineProps } from 'vue'

// Props-larni aniqlash
const props = defineProps({
  title: {
    type: String,
    required: true
  },
  message: {
    type: String,
    default: 'Default message'
  }
})
</script>

登入後複製

這裡的 props 物件定義了標題和訊息屬性。 title prop 類型是 String 且必要（required: true），message 具有 String 類型和預設值（Default message）。

使用道具：透過defineProps函數定義的props可以直接放在

<template>
  <div>
    <h1>{{ title }}</h1>
    <p>{{ message }}</p>
  </div>
</template>

<script setup>
const props = defineProps({
  title: {
    type: String,
    required: true
  },
  message: {
    type: String,
    default: 'Default message'
  }
})

// Props-larni ishlatish
console.log(props.title)
console.log(props.message)
</script>

登入後複製

道具類型與驗證： DefineProps 可用來定義 props 的型別和驗證。在 Vue 3 中，我們可以提供用於驗證的類型，例如 String、Number、Boolean、Array、Object ...

<script setup>
const props = defineProps({
  id: {
    type: Number,
    required: true
  },
  user: {
    type: Object,
    default: () => ({ name: 'Johon', age: 30 })
  }
})
</script>

登入後複製

在上面的範例中，id 屬性是 Number 類型且是強制的，而 user 屬性是 Object 類型並且有一個預設值。

預設值可讓您為 Vue 3 中的 props 定義預定義值。如果沒有向組件發送任何 props，Vue 將使用預設值。這更方便，因為它使組件更易於使用且更安全。

在下一篇文章中，我們將討論 Vue3 中的發射。

您可以在網路上關注我們，如果文章有用，請透過評論和 Vuechi 與您的朋友分享。？

以上是Vue.js 給出 Props 概念的詳細內容。更多資訊請關注PHP中文網其他相關文章！