1️⃣ 组件

Vue 的组件可以理解为预先定义好行为的 ViewModel 类，一个组件可以预定义很多选项，但是最核心的就是以下几个：
因为组件是可复用的 Vue 实例，所以它们与 new Vue 接收相同的选项，例如 data、computed、watch、methods 以及生命周期钩子等。仅有的例外是像 el 这样根实例特有的选项。

  1. **模板（ template ）：** 模板声明了数据和最终展现给用户的 DOM 之间的映射关系。
  2. **初始数据（ data ）：**一个组件的初始数状态。对于可复用的组件来说，通常是私有状态。
  3. **接受的外部参数（ props ）：**组件之间通过参数来进行数据的传递和共享。参数默认是单向绑定（ 由上至下 ），但也可以显式声明为双向绑定。
  4. **方法（ methods ）：** 对数据的改动操作一般都在组件的方法内进行。可以通过 v-on 指令将用户输入和组件方法进行绑定。
  5. **生命周期钩子函数（ lifecycle hooks ）：** 一个组件会触发多个生命周期钩子函数，在这些钩子函数中，我们可以封装一些自定义的逻辑。

1️⃣ 基本规则和使用

2️⃣ 组件名

定义组件名的方式有两种：

  1. 第一种：使用 kebab-case (横短线分隔命名)
     1. 当使用 kebab-case 定义一个组件时，你必须在引用这个自定义元素时使用 kebab-case，例如：<my-component></my-component>。
  2. 第二种：使用 PascalCase (大驼峰命名)
     1. 当使用 PascalCase 定义一个组件时，你在引用这个自定义元素时两种命名法都可以。也就是说<my-component-name> 和 <MyComponentName> 都是可接受的。注意，尽管如此，直接在 DOM (即字符串模板或单文件组件) 中使用时只有 kebab-case 是有效的。

另：在 DOM 中强烈推荐遵循 W3C 规范中的自定义组件名 (字母全小写且必须包含一个连字符)。这会帮助你避免和当前以及未来的 HTML 元素相冲突。

<div id="app">
  <my-component></my-component>
</div>

Vue.component('my-component', {
  data() {
    return {
    }
  },
  template: '<h1>My-Component - 组件</h1>'
})

2️⃣ 组件的 data 选项

当定义一个组件时 data 必须是一个函数，因此每个实例可以维护一份被返回对象的独立的拷贝

function data() {
  return {
    a: 10,
    b: 20,
  };
}
let v1 = data();
let v2 = data();
console.log(v1); // {a: 10, b: 20}
console.log(v2); // {a: 10, b: 20}
v1.a = 100;
v1.b = 200;
console.log(v1); // {a: 100, b: 200}
console.log(v2); // {a: 10, b: 20}

Vue.component('my-component', {
  data() { 
    return {
    }
  },
  template: '<h1>My-Component - 组件</h1>'
})

2️⃣ 单个根元素

Vue2.x 每个组件只能有一个跟元素 Vue3.x 可以有多个跟元素

Vue.component('my-component', {
  data() {
    return {
    }
  },
  // 只能有一个跟元素
  template: 
    `<div>
      ...... 
    </div>`
})