前言

回過頭看，props 太太太重要了，決定為它獨立一篇

Props

透過它我們才能從父元件傳遞資料到子元件，子元件是無法透過 props 傳遞資料給父元件的！
而且對子元件而言，它接收到的 props 是唯讀沒辦法被異動的！因為這個值是被父元件所擁有！

定義 props

ex:
單個 props

<template>
  <p>{{ name }}</p>
</template>

<script>
export default {
  props: ['name']
}
</script>

多個 props，以陣列表示

<template>
  <p>Hi {{ firstName }} {{ lastName }}</p>
</template>

<script>
export default {
  props: [
    'firstName', 
    'lastName'
  ],
}
</script>

傳資料給 props

利用 data v-bind 綁定屬性的方式

ex:

<template>
  <ComponentName :title=title />
</template>

<script>
export default {
  //...
  data() {
    return {
      title: 'Understanding Props in vuejs'
    }
  },
  //...
}
</script>

或是一個靜態固定值

<ComponentName title="Understanding Props in vuejs" />

沒有用 v-bind 傳入的 props，會是純字串的形式！

規範型別

利用物件來訂出 props 該有的型別，當傳入資料不符合 prop 型別時，Vue 會在 console 送出警告。

可使用以下型別:

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

ex:

<template>
  <p>Hi {{ firstName }} {{ lastName }}</p>
</template>

<script>
export default {
  props: {
    firstName: String,
    lastName: String
  },
}
</script>

如果 prop 為必要時，可使用 required 屬性

ex:

props: {
  name: {
    type: String,
    // 增加 required
    required: true
  }
}

當子元件沒有從父元件取得資料時，有設定預設值的方式
ex:

props: {
  name: {
    type: String,
    required: true,
    // 增加 default
    default: 'John Doe'
  },
  img: {
    type: String,
    default: '../image-path/image-name.jpg',
   },
}

在 HTML中屬性不分大小寫，瀏覽器會把大寫字元都解析成小寫字元，這代表當使用 DOM 模板時，駝峰式的 prop 名稱必須用 kebab 式的名稱 (以-連接單字)

ex:

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>

補充 Props V.S. Data

Vue 可以使用 props 和 data 來儲存資料/變數，差異在？？？

Data 就像每一個元件的私有記憶體，儲存資料的地方，任何想保存的資料或是變數，都可以放置在 data，只有元件本身可以使用它！

Props 則是父元件向下傳到子元件的資料。

當我們使用 Vue 時，不用考慮何時該去更新元件或是重新渲染畫面，Vue 會去監控響應式屬性 reactive property(例如: props、computed props 以及 data 中所有值 )。一但其中有值改變，Vue 就會更新並重新渲染！

在元件中定義 data 和 props

export default {
  props: ['propA', 'propB'],
  data() {
    return {
      dataA: 'hello',
      dataB: 'world',
    };
  },
};

如果要在 method 中取得，不需要 this.props.propA 或是 this.data.dataA，Vue幫我們省略了 props和 data，只需要用 this.propA 或 this.dataA 就好。

也因為如此，要避免　props 和 data 中有相同的命名！

參考

How to Use Props in Vue.js
Props Versus Data in Vue: The Subtle Differences You Need to Know

下篇預告

• 元件續
  • 跨層級的溝通

每日一句:
學一次用一輩子；一天不用忘光光