Vue 3.0 Props

該頁面假設你已經閱讀過了組件基礎。如果你還對組件不太了解，推薦你先閱讀它。

#Prop 類型

到這里，我們只看到了以字符串數組形式列出的 prop：

props: ['title', 'likes', 'isPublished', 'commentIds', 'author']

但是，通常你希望每個 prop 都有指定的值類型。這時，你可以以對象形式列出 prop，這些 property 的名稱和值分別是 prop 各自的名稱和類型：

props: {
  title: String,
  likes: Number,
  isPublished: Boolean,
  commentIds: Array,
  author: Object,
  callback: Function,
  contactsPromise: Promise // 或任何其他構造函數
}

這不僅為你的組件提供了文檔，還會在它們遇到錯誤的類型時從瀏覽器的 JavaScript 控制臺提示用戶。你會在這個頁面接下來的部分看到類型檢查和其它 prop 驗證。

#傳遞靜態(tài)或動態(tài)的 Prop

這樣，你已經知道了可以像這樣給 prop 傳入一個靜態(tài)的值：

<blog-post title="My journey with Vue"></blog-post>

你也知道 prop 可以通過 v-bind 或簡寫 : 動態(tài)賦值，例如：

<!-- 動態(tài)賦予一個變量的值 -->
<blog-post :title="post.title"></blog-post>


<!-- 動態(tài)賦予一個復雜表達式的值 -->
<blog-post :title="post.title + ' by ' + post.author.name"></blog-post>

在上述兩個示例中，我們傳入的值都是字符串類型的，但實際上任何類型的值都可以傳給一個 prop。

#傳入一個數字

<!-- 即便 `42` 是靜態(tài)的，我們仍然需要 `v-bind` 來告訴 Vue     -->
<!-- 這是一個 JavaScript 表達式而不是一個字符串。             -->
<blog-post :likes="42"></blog-post>


<!-- 用一個變量進行動態(tài)賦值。-->
<blog-post :likes="post.likes"></blog-post>

#傳入一個布爾值

<!-- 包含該 prop 沒有值的情況在內，都意味著 `true`。          -->
<blog-post is-published></blog-post>


<!-- 即便 `false` 是靜態(tài)的，我們仍然需要 `v-bind` 來告訴 Vue  -->
<!-- 這是一個 JavaScript 表達式而不是一個字符串。             -->
<blog-post :is-published="false"></blog-post>


<!-- 用一個變量進行動態(tài)賦值。                                -->
<blog-post :is-published="post.isPublished"></blog-post>

#傳入一個數組

<!-- 即便數組是靜態(tài)的，我們仍然需要 `v-bind` 來告訴 Vue        -->
<!-- 這是一個 JavaScript 表達式而不是一個字符串。             -->
<blog-post :comment-ids="[234, 266, 273]"></blog-post>


<!-- 用一個變量進行動態(tài)賦值。                                -->
<blog-post :comment-ids="post.commentIds"></blog-post>

#傳入一個對象

<!-- 即便對象是靜態(tài)的，我們仍然需要 `v-bind` 來告訴 Vue        -->
<!-- 這是一個 JavaScript 表達式而不是一個字符串。             -->
<blog-post
  :author="{
    name: 'Veronica',
    company: 'Veridian Dynamics'
  }"
></blog-post>


<!-- 用一個變量進行動態(tài)賦值。                                 -->
<blog-post :author="post.author"></blog-post>

#傳入一個對象的所有 property

如果你想要將一個對象的所有 property 都作為 prop 傳入，你可以使用不帶參數的 v-bind (取代 v-bind:prop-name)。例如，對于一個給定的對象 post：

post: {
  id: 1,
  title: 'My Journey with Vue'
}

下面的模板：

<blog-post v-bind="post"></blog-post>

等價于：

<blog-post v-bind:id="post.id" v-bind:title="post.title"></blog-post>

#單向數據流

所有的 prop 都使得其父子 prop 之間形成了一個單向下行綁定：父級 prop 的更新會向下流動到子組件中，但是反過來則不行。這樣會防止從子組件意外變更父級組件的狀態(tài)，從而導致你的應用的數據流向難以理解。

另外，每次父級組件發(fā)生變更時，子組件中所有的 prop 都將會刷新為最新的值。這意味著你不應該在一個子組件內部改變 prop。如果你這樣做了，Vue 會在瀏覽器的控制臺中發(fā)出警告。

這里有兩種常見的試圖變更一個 prop 的情形：

1. 這個 prop 用來傳遞一個初始值；這個子組件接下來希望將其作為一個本地的 prop 數據來使用。在這種情況下，最好定義一個本地的 data property 并將這個 prop 作為其初始值：

props: ['initialCounter'],
data() {
  return {
    counter: this.initialCounter
  }
}

1. 這個 prop 以一種原始的值傳入且需要進行轉換。在這種情況下，最好使用這個 prop 的值來定義一個計算屬性：

props: ['size'],
computed: {
  normalizedSize: function () {
    return this.size.trim().toLowerCase()
  }
}

提示

注意在 JavaScript 中對象和數組是通過引用傳入的，所以對于一個數組或對象類型的 prop 來說，在子組件中改變變更這個對象或數組本身將會影響到父組件的狀態(tài)。

#Prop 驗證

我們可以為組件的 prop 指定驗證要求，例如你知道的這些類型。如果有一個需求沒有被滿足，則 Vue 會在瀏覽器控制臺中警告你。這在開發(fā)一個會被別人用到的組件時尤其有幫助。

為了定制 prop 的驗證方式，你可以為 props 中的值提供一個帶有驗證需求的對象，而不是一個字符串數組。例如：

app.component('my-component', {
  props: {
    // 基礎的類型檢查 (`null` 和 `undefined` 會通過任何類型驗證)
    propA: Number,
    // 多個可能的類型
    propB: [String, Number],
    // 必填的字符串
    propC: {
      type: String,
      required: true
    },
    // 帶有默認值的數字
    propD: {
      type: Number,
      default: 100
    },
    // 帶有默認值的對象
    propE: {
      type: Object,
      // 對象或數組默認值必須從一個工廠函數獲取
      default: function() {
        return { message: 'hello' }
      }
    },
    // 自定義驗證函數
    propF: {
      validator: function(value) {
        // 這個值必須匹配下列字符串中的一個
        return ['success', 'warning', 'danger'].indexOf(value) !== -1
      }
    },
    // 具有默認值的函數
    propG: {
      type: Function,
      // 與對象或數組默認值不同，這不是一個工廠函數 —— 這是一個用作默認值的函數
      default: function() {
        return 'Default function'
      }
    }
  }
})

當 prop 驗證失敗的時候，(開發(fā)環(huán)境構建版本的) Vue 將會產生一個控制臺的警告。

提示

注意那些 prop 會在一個組件實例創(chuàng)建之前進行驗證，所以實例的 property (如 data、computed 等) 在 default 或 validator 函數中是不可用的。

#類型檢查

type 可以是下列原生構造函數中的一個：

• String
• Number
• Boolean
• Array
• Object
• Date
• Function
• Symbol

此外，type 還可以是一個自定義的構造函數，并且通過 instanceof 來進行檢查確認。例如，給定下列現成的構造函數：

function Person(firstName, lastName) {
  this.firstName = firstName
  this.lastName = lastName
}

你可以使用：

app.component('blog-post', {
  props: {
    author: Person
  }
})

用于驗證 author prop 的值是否是通過 new Person 創(chuàng)建的。

#Prop 的大小寫命名 (camelCase vs kebab-case)

HTML 中的 attribute 名是大小寫不敏感的，所以瀏覽器會把所有大寫字符解釋為小寫字符。這意味著當你使用 DOM 中的模板時，camelCase (駝峰命名法) 的 prop 名需要使用其等價的 kebab-case (短橫線分隔命名) 命名：

const app = Vue.createApp({})


app.component('blog-post', {
  // camelCase in JavaScript
  props: ['postTitle'],
  template: '<h3>{{ postTitle }}</h3>'
})

<!-- kebab-case in HTML -->
<blog-post post-title="hello!"></blog-post>

重申一次，如果你使用字符串模板，那么這個限制就不存在了。