tags: Vuejs

前言 ✐

上一篇中說明了透過 Prop，我們可以將父組件的值傳遞給子組件，這一篇中，我們會來看 Prop 的使用細節。

命名規則 ✐

在介紹 Prop 大小寫前，我們先離題一下，來介紹一下 命名規則

命名規則在維基百科的定義：
In computer programming, a naming convention is a set of rules for choosing the character sequence to be used for identifiers which denote variables, types, functions, and other entities in source code and documentation.

命名規則通常取決於 context，使用的原因通常是為了減少閱讀及理解源程式碼的精力 ^wiki^，儘管選擇上不同派系的觀點並不是完全相同，但有幾點共同的影響要素，今天要說的便是多字標識符 Multiple-word identifiers：

多字標識符 Multiple-word identifiers

由於大多數編程語言都不允許標識符存在空白，需要一種界定多個單字識別的方法。舉例來說像是 get data -> getdata 閱讀及理解上都並不直觀。

下列列出幾種多字標識符格式：

two words 這個單字作為範例

補充 ✒︎ ： 匈牙利命名法^wiki^（Hungarian notation）是電腦程式設計中的一種變數命名規則，一個變數名由一個或多個小寫字母開始，這些字母有助於記憶變數的類型和用途，緊跟著的就是程式設計師選擇的任何名稱。這個後半部分的首字母可以大寫，以區別前面的類型指示字母（參見駝峰式大小寫）。

範例：
strName：變數代表一個包含名字的字串（"str"）但是沒有指明這個字串是如何實現的。

Prop 大小寫

使用 Prop 時，我們需要先在子元件定義 Prop attribute 名稱，以 two words 為範例，會如同下方：

Vue.component("my-component", {
  props: ["twoWords"],
  template: `
<div>
  <h2>{{ title }}</h2>
  <p>{{ text }}</p>
</div>
`
});

父元件使用 DOM 模板時，由於 HTML 大小寫不敏感，所以在子元素中以 camel case 定義的 Prop attribute 需要使用等價的 kebab-case 名稱：

✅ 要這樣：

<my-component two-words="words">

? 不要這樣：

<my-component twoWords="words">

記住，這是在使用 DOM 作為模板時，如果使用的是 template 模板則無此限制。

Prop 類型

在子組件中，註冊 Prop attribute 時，我們剛才都是使用 Array，不過子組件若是要對傳入的值設定 類型檢查、默認值，可以使用 Object 配置詳細的選項。

使用 Array

Vue.component("my-component", {
  props: ["twoWords"],
  template: `
<div>
  <h2>{{ title }}</h2>
  <p>{{ text }}</p>
</div>
`
});

使用 Object

Vue.component("my-component", {
  props: {
      twoWords: {
      // 類型驗證
      type: String,
      // 預設值，當沒有傳入值時的預設值
      default: '預設文字',
      // 是否是必填項目
      required: true,
      // 驗證傳入值的函數
      validator: function(value) {
          return value.length > 3
      }
      }
  },
  template: `
<div>
  <h2>{{ title }}</h2>
  <p>{{ text }}</p>
</div>
`
});

透過設定物件值的 props，可以帶來以下優點：

1. 驗證 prop 類型，當有非子元件預設的 prop 類型被傳入，可以在 console 控制台中看到錯誤提示
2. 為組件提供傳入值的詳細文檔，他人使用該組件時，可以知道要傳入什麼類型的值，以及該值需要通過什麼驗證。

就結論來說，比起 Array 形式，使用 Object 形式的 prop 在日後複用組件以及驗證上都更加有優點。

傳入靜態或動態的 Prop 值

簡單來說結合 v-bind 我們可以給予 prop attribute 傳入動態的值。

<my-component v-bind:two-words="words">

單向數據流

這裡與前半部 v-model 的雙向綁定不同，這裡指的是組件之間的單向數據流，使用 prop 傳輸的數據都是 單向的 自父組件傳入子組件。

子組件的數據不會反向流動回父組件，這樣會造成數據追蹤管理的麻煩。單向數據流一旦父組件數據更動，子組件的 prop 也會連動更新。

如果需要更動傳入的值，可以使用以下方法：

使用 prop 傳遞初始值，但是組件之後需要將 prop 作為本地值改動。

這個時候可以定義一個本地的 data，將該 prop 作為初始值：

...
  props: ["twoWords"],
  data(){
  return {
  text: this.twoWords
  }
  },
...

以上為此次內容，感謝看到這裡的你，我們明天見。

若是文中有任何錯誤、錯字、想討論的內容，歡迎各位大大不吝鞭笞指正、交流分享，筆者不慎感激 ✦ ✦ ✦

▶︎ 筆者 github：https://github.com/YUN-RU-TSENG
▶︎ 老王賣瓜之筆者另一篇鐵人：每天來點 CSS Specification

▶︎ 倘若不斷向深處扎根，似乎就能茁壯成長 - RM

參考資料：

1. Vuejs.org 2.x
2. 命名規則 | ShunNien’s Blog
3. Naming convention (programming) - Wikipedia