组件

定义： 实现应用中局部 功能代码 和资源 的集合

编写方式

传统方式编写

存在的问题：

1. 依赖关系混乱、不好维护
2. 代码复用率不高

使用组件编写

优点：

1. 复用编码
2. 简化编程
3. 提高运行效率

编写形式

非单文件组件

定义：一个文件中可包含多个组件

单文件组件

定义：一个文件中仅包含一个组件

使用步骤

1. 定义（创建）组件
2. 注册组件
3. 使用组件（写组件标签）

定义组件

Vue.extend(options)

此时的options与创建Vue实例时的options几乎相同，区别如下：

1. 不包含el配置项，其最终用途由其所属的Vue实例管理
2. data写成函数，以避免复用时数据存在引用关系

      const School = Vue.extend({
        template: `
        <div>
          <h2>学校名称：{{name}}</h2>
          <h2>学校地址：{{address}}</h2>
        </div>
        `,
        data() {
          return {
            name: "测试",
            address: "北京",
          };
        },
      });

注册组件

局部祖册组件

新建实例时传入components选项

      let vm = new Vue({
        el: "#app",
        components: {
          School,
          Student,
        },
      });

全局注册组件

依靠Vue.component('组件名',组件)

      Vue.component('School',School)

编写组件标签

<组件名></组件名>

      <School></School>

注意

组件名

1. 一个单词：纯小写或首字母大写
2. 多个单词：短横线或大驼峰（脚手架方式）

备注：

1. 组件名尽可能回避HTML中已有元素名称
2. 可使用name配置项指定组件开发者工具中的名字

组件标签

1. 纯小写
2. 单标签（需使用脚手架支持）

简写

const school=Vue.extend(options) ===>const school=options