Day 8 - 初探Vue Component

在Vue的世界中，是由一个又一个的元件所构成，而我们可以透过自订元件的方式量身打造客制化的元件并进行复用。

首先，我们先建立一个独立的Component.vue。

<template>
  <div>
    <h1>Testing Component</h1>
  </div>
</template>

这样之後，我们就可以将这个样板作为元件来引入，透过import便可以达到这个效果。

import Component from "/src/components/Component.vue";

在Vue中，每个元件都必须向Vue实例来进行注册，我们可以用两种方式来注册元件。

Global 全域注册

如果有元件共用的需求，我们会使用Vue.component 语法来注册一个元件，在注册全域元件时要给予两个参数，分别为「组件名称」及「选项物件」，在下方范例中「组件名称」为 test ，「选项物件」则为其後的内容。

<template>
  <div id="app">
    <test></test>
  </div>
</template>

<script>
import Component from "/src/components/Component.vue";

export default {
  name: "App",
  components: {
    test: Component,
  },
};
</script>

效果:

一旦子元件中改变，引用它的元件也会随之更新。

除此之外，一旦引入元件，就可以将元件进行任意次数的复用：

<template>
  <div id="app">
    <test></test>
    <test></test>
    <test></test>
    <test></test>
  </div>
</template>

透过元件化的方式，我们可以更简单的切割每一个区块，例如，一个页面我们可能会有页头、侧边栏、内容区等组件，每个组件又包含了其它的像Navigation bar等等之类的组件，是不是很方便呢。

原始码可参考: https://codesandbox.io/s/goofy-lichterman-jgt1r?file=/src/App.vue

另外，我们也可以透过区域注册的方式注册元件，只要使用全域注册就一定会载入，因此使用全域注册会将原本不需要的组件也载入进来，拖慢载入的时间。

区域注册会是一个选项物件:

`const componentC = {
  // options
  template: `
    <div>c</div>
  `};`

<template>
  <div id="app">
    <test></test>
    <test2></test2>
  </div>
</template>

<script>
import Component from "/src/components/Component.vue";
const local_component = {
  // options
  template: `
    <div>Local Component</div>
  `,
};

export default {
  name: "App",
  components: {
    test: Component,
    test2: local_component,
  },
};
</script>

成果如下，test是以全域注册的元件，而test2则是区域注册的元件。