前言

本系列將介紹 Rails with Vue 的基本概念，並且以一個簡單的專案 Todo 來說明如何使用 Rails with Vue。我將透過這一系列的文章記錄我學習的過程，並且將我所學到的知識分享給大家。

• 【Day 01】淺入淺出 Rails with Vue - Before We Begin
• 【Day 02】淺入淺出 Rails with Vue - Vue 的基本概念 - 1
• 【Day 03】淺入淺出 Rails with Vue - Vue 的基本概念 - 2
• 【Day 04】淺入淺出 Rails with Vue - Vue 的基本概念 - 3
• 【Day 05】淺入淺出 Rails with Vue - Vue 的基本概念 - 4
• 【Day 06】淺入淺出 Rails with Vue - Vue 的基本概念 - 5
• 【Day 07】淺入淺出 Rails with Vue - Vue 的基本概念 - 6
• 【Day 08】淺入淺出 Rails with Vue - Vue 的基本概念 - 7
• 【Day 09】淺入淺出 Rails with Vue - Vue 的基本概念 - 8
• 【Day 10】淺入淺出 Rails with Vue - Vue 的基本概念 - 9
• 【Day 11】淺入淺出 Rails with Vue - Vue 的基本概念 - 10
• 【Day 12】淺入淺出 Rails with Vue - Vue 的基本概念 - 11
• 【Day 13】淺入淺出 Rails with Vue - Vue 的基本概念 - 12
• 【Day 14】淺入淺出 Rails with Vue - Vue 的基本概念 - 13
• 【Day 15】淺入淺出 Rails with Vue - Vue 的基本概念 - 14
• 【Day 16】淺入淺出 Rails with Vue - Vue 的基本概念 - 15
• 【Day 17】淺入淺出 Rails with Vue - Vue 的基本概念 - 16
• 【Day 18】淺入淺出 Rails with Vue - Vue 的基本概念 - 17
• 【Day 19】淺入淺出 Rails with Vue - Vue 的基本概念 - 18
• 【Day 20】淺入淺出 Rails with Vue - Vue 的基本概念 - 19
• 【Day 21】淺入淺出 Rails with Vue - Vue 的基本概念 - 20
• 【Day 22】淺入淺出 Rails with Vue - Vue 的基本概念 - 21
• 【Day 23】淺入淺出 Rails with Vue - Vue 的基本概念 - 22

Component Registration

Local Registration

上篇文章說到了 global registration 會遇到的一些問題，現在我們來看看 local registration 的方式。
如以下範例中我們 local registration 了 3 個 component，分別是 ComponentA、ComponentB、ComponentC。

var ComponentA = { /* ... */ }
var ComponentB = { /* ... */ }
var ComponentC = { /* ... */ }

如果要使用這些 components，我們只需要在 root Vue instance 中使用 components 屬性來註冊這些 components 即可。
例如以下範例中，我們在 Vue 實例中的 components 屬性中註冊了 ComponentA、ComponentB。
在 component 屬性中 key 代表的是 component 的名稱，value 則是 component 的內容。

new Vue({
  el: '#app',
  components: {
    'component-a': ComponentA,
    'component-b': ComponentB
  }
})

要特別注意的如下，locally registered components are not also available in subcomponents.
但如果想要在 ComponentB 中使用 ComponentA，則必須在 ComponentB 中的 components 屬性中註冊 ComponentA。
範例如下：

var ComponentA = { /* ... */ }

var ComponentB = {
  components: {
    'component-a': ComponentA
  },
  // ...
}

又或者你使用的是 ES2015 的 import 語法，你可以在 ComponentB 中使用 import 來引入 ComponentA。

import ComponentA from './ComponentA.vue'

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

以上範例中 ComponentA 代表的其實就是 ComponentA: ComponentA，這是 ES2015 的語法糖。

Module Systems

如果你不是使用 module system 的 import/export 語法，可以暫時略這個章節。

Local Registration in a Module System

如果你使用 module system，例如 webpack，你可以在 module 中使用 import 語法來引入 component，然後在 components 屬性中註冊 component。
如以下範例中，我們透過 import 語法來引入 ComponentA，然後在 components 屬性中註冊 ComponentA。

import ComponentA from './ComponentA'
import ComponentC from './ComponentC'

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

Automatic Global Registration of Base Components

在許多的 Components 中其實都是有一些共用且使用頻繁的 Components，例如 Button、Icon、Input 等等。
我們通常將這些共用的 Components 稱為 Base Components。
如果將這些 Base Components 都透過 import 語法來引入，那麼每個 Components 都要引入一次，這樣會讓程式碼變得很冗長。

import BaseButton from './BaseButton.vue'
import BaseIcon from './BaseIcon.vue'
import BaseInput from './BaseInput.vue'

export default {
  components: {
    BaseButton,
    BaseIcon,
    BaseInput
  }
}

為了解決這個問題，Vue 提供了一個自動 global registration 的功能，如果你使用的是 Webpack，你可以使用 require.context 來自動註冊這些常用的 Base Components。
如以下例子中，我們將 BaseButton、BaseIcon、BaseInput 這些 Base Components 放在 components 資料夾中，然後透過 require.context 來自動註冊這些 Base Components。
你可以在 app's entry file (e.g. src/main.js) 中 global import 這些 Base Components。

import Vue from 'vue'
import upperFirst from 'lodash/upperFirst'
import camelCase from 'lodash/camelCase'

const requireComponent = require.context(
  // The relative path of the components folder
  './components',
  // Whether or not to look in subfolders
  false,
  // The regular expression used to match base component filenames
  /Base[A-Z]\w+\.(vue|js)$/
)

requireComponent.keys().forEach(fileName => {
  // Get component config
  const componentConfig = requireComponent(fileName)

  // Get PascalCase name of component
  const componentName = upperFirst(
    camelCase(
      // Gets the file name regardless of folder depth
      fileName
        .split('/')
        .pop()
        .replace(/\.\w+$/, '')
    )
  )


  // Register component globally
  Vue.component(
    componentName,
    // Look for the component options on `.default`, which will
    // exist if the component was exported with `export default`,
    // otherwise fall back to module's root.
    componentConfig.default || componentConfig
  )
})

要特別注意的是 global registration 必須發生在 new Vue 之前，否則會出現警告。

Reference

• https://v2.vuejs.org/v2/guide/components-registration.html