前言

接下來多篇的元件介紹會以官方文件　Components In-Depth 章節為主:
未知part數的概念

包含:

• 元件命名
• Props 使用
• 自訂事件
• Slots
• Provide/ inject
• ...等

元件命名

前一篇:元件基本使用 已提到 global 和 local 兩種註冊方式，下面則介紹元件命名方式

kebab-case-連字號

ex:

// - 區隔單字；HTML 中以 <my-component-name> 使用
app.component('my-component-name', {
  /* ... */
})

PascalCase-大駝峰

ex:

// HTML 中以 <my-component-name> 或 <MyComponentName> 使用
app.component('MyComponentName', {
  /* ... */
})

HTML標籤解析時，無區分大小寫，故使用　kebab-case　較安全！

建議全都小寫並以使用 hyphen (-) 分隔單字

模組化

如果專案架構是採取 import/require 的方式，官方建議建立一個 components 資料夾，使每一個元件都獨立成一個檔案，並且在註冊元件前，記得先 import 需要的元件進來。

ex:

// 檔案 ComponentB.js 或是 ComponentB.vue 的內容
import ComponentA from './ComponentA'
import ComponentC from './ComponentC'

export default {
  components: {
    ComponentA,
    ComponentC
  }
  // ...
} 

ComponentB 中即可以使用 ComponentA 和 ComponentC!

單向資料流

子元件需要自定義的屬性，並於父元件使用子元件時，傳入資料。

ex:

// Button.vue 檔案
<template>
  <button>{{title}}</button>
</template>

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

傳遞資料到 Props

<template>
  <div id="app">
    <custom-button title="Like"></custom-button>
    <custom-button title="Dislike"></custom-button>
  </div>
</template>

<script>
 import Button from './components/Button.vue'

 export default{
    components:{
        'custom-button': Button
    }
  }
</script>

當父元件屬性改變時，它會將資料往下傳遞到子元件，防止子元件去異動到父元件的狀態！
父元件被更新時，所有子元件用到的 props 會被更新為最新的值。

不應該在子元件中擅自去更改 props

記得: 每一個元件都應該有屬於自己的狀態，自己的狀態自己改
摘自 重新認識 Vue.js

下篇預告

• 元件續
  • Props

每日一句:
周休二日不嫌少；周休四日恰恰好