组件

1. 组件的定义：实现局部功能效果的代码集合。（好维护、依赖关系不混乱、复用高）

单文件组件（.vue）与非单文件组件（.html）

1. 单文件组件：一个文件中只包含1个组件。
2. 非单文件组件：一个文件中包含n个组件。

在非单文件组件中创建组件

局部组件

// 创建一个组件
const compontentA = Vue.extend({
  data() {
    return {
      ...
    }
  }
})
//创建vm
new Vue({
  el: '#root',
  // 注册组件（局部组件）
  components: {
    compontentA
  }
});

全局组件

// 创建一个组件
const compontentA = Vue.extend({
  data() {
    return {
      ...
    }
  }
})
// 注册全局组件
Vue.compontent('compontent', compontent);
//创建vm
new Vue({
  el: '#root',
});

总结非单文件组件

1. Vue中使用组件三大步骤
   ? 定义组件（创建组件）
   ? 注册组件
   ? 使用组件（写组件标签）
2. 如何定义一个组件？
   ? 2.1 使用Vue.extend(option)创建，其中options和new Vue(option)时传入的那个option几乎一样，但也有点区别。
   区别如下↓
   ?? el不要写听老大vm的 vm说在哪就在哪。
   ?? data必须写成函数，避免组件复用时，数据存在引用关系。
   备注：要使用template来配置组件的结构。
3. 编写组件标签（使用组件）
   <组件名>
4. 创建组件一个简写方式：
   ?????const test = Vue.extend(option) 可简写为：const test = option
5. 几大注意点
   ? 4.1 关于组件名
   ???一个单词组成
   ?????第一种写法（首字母小写）：test
   ?????第二种写法（首字母大写）：Test
   ???多个单词组成
   ?????第一种写法（kebab-case命名）：my-test
   ?????第二种写法（CamelCase命名）：MyTest（需要Vue脚手架支持）
   ???备注：
   ?????组件名尽可能回避HTML中已有的元素名称，例如：h2、H2都不行。
   ?????可以使用name配置项指定组件在开发者工具中呈现的名字。
   ? 4.2 关于组件标签
   ?????第一种写法：
   ?????第二种写法：
   ?????备注：不用脚手架时，会导致后续组件不能渲染。