程式設計這麼好玩的東西，一輩子夠玩嗎？

在使用時 Vue 元件時，經常會有元件間資料傳遞的需求，元件和元件之間也會產生父子元件的關係，通常父元件表示是 Vue 的實例，也有可能指的是於一個元件中(父元件)使用了另一個元件(子元件)。而子元件如果需要父元件裡的資料，就需要使用在子元件裡本身使用 Props 的這個屬性，再依據 Props 這個屬性的「值」去父元件取(值)資料。

先看一下 codepen 範例Vue_Base_component_props

範例裡創建一個全域的子元件與一個 Vue 實例，子元件裡有自己的資料msg與樣版 template，樣版裡我們希望顯示子元件自己的資料msg和父元件的資料titleP，所以可在子元件裡使用props屬性來取得父元件的資料，props的值可以是不同的型別，在這裡我們希望拿到多個父元件的值，所以使用陣列型別props: ['titleP', 'content']。

在 HTML 的部分，我們直接以子元件的名稱寫成標籤<menu-item></menu-item>，這組標籤代表我們在這個子元件裡的樣版 template 內容：template: "<div> {{ msg + '-----' + titleP + '-----' + content }} </div>"，所以瀏覽器會顯示「子元件的資料 ----- undefined ----- undefined」。 為什麼會顯示undefined是因為，我們在子元件的樣版裡有插入兩個父元件的資料，卻沒有指定值的來源。

我們可以用「靜態」和「動態」的方式傳值。
「靜態」的方式是直接在子元件的標籤上，以屬性名(以 DOM 的命名方式)＝值，直接顯示我們給的值:<menu-item title-p="靜態傳來自父元件的值"></menu-item>。
「動態」的方式則是以v-bind的方式綁定在父元件裡的值：<menu-item :title-p="titleP"></menu-item>。
當然，我們也可以動靜態混用像是<menu-item :title-p="titleP" content="hello"></menu-item>，在父元件裡並沒有content這個屬性，但是在子元件的props和樣版 template 裡有指定content，就可以在同一個標籤裡使用「靜態」方式取到值。

<div id="app">
  <!-- 沒有傳值的狀態 -->
 <menu-item></menu-item>
  <!-- 靜態傳值 -->
  <menu-item title-p="靜態傳來自父元件的值"></menu-item>
  <!-- 動態傳值 -->
  <menu-item :title-p="titleP" content="hello"></menu-item>
</div>

<script>
  // 全域的子元件
  Vue.component('menu-item', {
    // 在子元件中接收父元件的資料 props
    props: ['titleP', 'content'],
    data: function () {
      return {
        msg: '子元件的資料',
      };
    },
    // 直接寫入父元件的資料
    template: `<div> {{ msg + '-----' + titleP + '-----' + content }} </div>`,
  });

  // 實例本身就是父元件
  const app = new Vue({
    el: '#app',
    data: {
      titleP: '動態綁定父元件資料',
    },
  });
</script>

props 的屬性名規則

• 在 props 中屬性名稱可使用駝峰形式命名，但在 HTML 裡需要使用短橫線-的形式，因為在 DOM(HTML 標籤) 的命名規則，只能接受短橫線-的命名形式。
• 字串型式的樣版 template 就沒有這個命名限制。

Vue.component('menu-item', {
  // 在JS中使用駝峰式命名
  props: ['menuTitle'],
  template: '<div>{{ menuTitle }}</div>',
});
// 在HTML中需是短橫線的命名形式 menuTitle -> menu-title
<menu-item menu-title="Hello"></menu-item>;

參考：元件註冊 — Vue.js │ Prop — Vue.js

每日一句法文有益身心：Joyeux Anniversaire ! --> 抓幽.阿.妮.威賽呵！ --> 生日快樂！