[Part 1 ] Vue.js 的精随-元件

前言

接下来多篇的元件介绍会以官方文件　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 会被更新为最新的值。