2020 諾貝爾和平獎出爐了，吃飯真的皇帝大，可以救無數的人啊！

昨天我們介紹了如何在定義一個全域的元件，在官方的網站上有提到「全域」定義的元件會在 webpack 打包時，既使我們定義了一個全域的元件且沒使用到它，webpack 也會一起打包進去，這樣會增加使用者下載無用的元件而可能影響效能。而透過局部定義(Local Registration)的元件就可解決這樣的問題。

我們先來看一下元件定義有哪些應該要注意的：

1. 註冊時的元件裡的data必須是一個函式，以函式的形式也可形成一個閉包的形式，保證每個元件的資料都是獨立的。
2. 元件模版內容必須是唯一的根元素(Root Element)來包覆，如果一個元件裡放兩個元件，會出現錯誤，只要在兩個元素的上層，以一個包裹住這些元件就可以了。
3. 元件模版內容可以是 ES6 的模版字串，模版字串需要瀏覽器提供 ES6 的語法支援。

元件的命名方式(Name Casing)

元件的命名方式大致上有兩種

1. 短線命名方式(kebab-case)：Vue.component('my-component',{ /_.../ })
2. 駝峰命名方式( PascalCase)：Vue.component('MyComponent',{ /.../ })

如果使用駝峰式命名元件，那麼在使用元件的時候只能在字串模版中使用元件，但是在普通 HTML 標籤模板中，必須使用短線-的方式使用元件，也就是說如果是在自己元件的template中使用就可以，但在元件以外的 HTML 標籤中需要插入時就必須改成短線的方式。
推薦使用短線的方式，較能統一。

範例：

<div id="app">
<!-- 會顯示錯誤 -->
<HelloWord></HelloWord>
<!-- 需改成短線命名 -->
<hello-world></hello-world>
</div>

<script>
  Vue.component(HelloWord, {
  data: function () {
    msg:'Hi hi';
  }, // data需為函式
  template: '<div>{{ msg }}</div>',
});
</script>

局部定義 Vue 元件(Local Registration)

局部定義元件的方法不需要以new建構是來新增，直接以建立變數的方式來建立，建立之後需要到 Vue 實例裡增加一個components的屬性，因為有可能會有一個元件以上，所以屬性名components為複數，再將剛剛定義的局部元件寫入components裡，並給予屬性和值，屬性的命名方式最好為小寫與下底線的形式，因為之後是用這個屬姓名來放入template樣版中，值則為剛剛定義的局部元件的名稱
語法如下：

const ComponentA = {
  /* ... */
};
const ComponentB = {
  /* ... */
};
const ComponentC = {
  /* ... */
};

new Vue({
  el: '#app',
  Data: {
    components: {
      // <--注意，有`s`
      // 推薦使用短線的方式
      'component-a': ComponentA,
      'component-b': ComponentB,
      'component-c': ComponentC,
    },
  },
});

需要注意的是，局部定義的元件只能在本身的實例裡使用，而無法在全域定義或父元件以外的地方使用。如果使用在父元件以外的地方並不會生效。
我們來看一下範例：

    <div id="app">
      <p>{{msg}}</p>
      <hello-paris></hello-paris>
      <hello-taipei></hello-taipei>
    </div>
    <script>
      Vue.component('HelloParis', {
        data: function () {
          return {
            msg: 'Hello France',
          };
        },
        // <hello-taipei></hello-taipei> 無效且不會顯示出來
        template: `
          <div>{{msg}}
          <hello-taipei></hello-taipei> 無效
          </div>

        `,
      });
      // 局部元件
      const HelloTaipei = {
        data: function () {
          return {
            msg: 'Hello Taipei',
          };
        },
        template: '<div>{{ msg }}</div>',
      };

      const app = new Vue({
        el: '#app',
        data: {
          msg: 'Hello Paris',
        },
        components: {
          // 在實例裡註冊
          'hello-taipei': HelloTaipei,
        },
      });
    </script>

在模塊中使用局部元件

到目前為止我們都是直接使用 CDN 的方式將 Vue.js 載入我們的頁面中，但如果是使用 Cli 的開發方式，就需要使用引入import 和輸出export的方式將這些元件引入和輸出，這裡我們不多做討論，建議可至官網詳細查閱這方面有關的使用方式。
組件註冊 模塊系統 — Vue.js

每日一句法文有益身心：La vie est belle ! --> 拉.V.ㄟ.被勒！ --> 生活真美好/愜意！