Vue组件

组件是什么？

在 Vue 里，一个组件本质上是一个拥有预定义选项的一个 Vue 实例。

1.组件的使用

1. 定义（注册）组件
2. 调用（使用）组件

将组件就看成是一个函数

2. 组件的注册

1. 全局组件注册

   当前 Vue 项目中，任何组件中都可以去使用

        Vue.component(id, {definition})
       // id - 组件的名字
       // definition - 组件的选项配置
   

2. 局部组件注册

   在哪个组件中注册的，就只能使用在哪个组件中

   new Vue({
   	components: {
   		id1: definition1
       	id2: definition2
   	}
   })
   
   // id1 id2 局部组件名字
   // definition1 definition2 局部组件对应的选项
   
   

在组件的 components 配置选项中去定义
new Vue() 生成的 Vue 实例，一般我们叫他 **根组件**

3. 组件的调用

将组件名当成自定义标签使用即可。

4.注意事项

1. 组件没有 el 选项。因为后续调用组件在哪里，这个组件的挂载点就是哪里
2. 必须有 template 或者 render 选项，用来规定组件的模板内容
3. data 选项**必须是一个函数返回对象的形式**  (???为什么???)
4. 组件名不能是现有的html标签名，也不能是其他已经注册过的组件名
5. 全局注册组件时，必须要放置在 new Vue 之前
6. 组件名可以使用短横线写法与驼峰写法。但是调用组件时需要使用短横线写法。下列三种情况时例外
   1. 写在 template 选项中
   2. 写在 <script type="text/x-template"></script> 里面的
   3. .vue 后缀的单文件组件中时
7. 组件的template模板 **必须只能有一个根元素**。

组件间的关系是如何确定的呢？

组件间的关系不是看定义组件时，而是看调用组件时

家谱式关系

一、父组件如何通信子组件 父 -> 子

二、子组件如何通信父组件 子 -> 父

三、兄弟组件之间如何通信 兄 -> 弟 弟 -> 兄

组件的 data 选项为什么要写成函数形式

组件是可以进行复用的。如果 data 直接写成 对象，复用的时候，会造成数据污染（复用后影响其它实例）

5. 单文件组件

vue 中后缀名是 .vue 的文件，我们称它为 单文件组件

一个单文件组件的组成

1. template
2. script
3. style

模板

<template>
  <div>
   
  </div>
</template>

<script>
export default {
 
  data() {
    return {
     
    }
  }
}
</script>
<style>

</style>

1. 一个单文件组件，必须要有 template 。其余两个可有可无
2. 如果 script 中暴露组件的选项配置对象时没有设置 name 选项，文件名就是当前的组件名
3. style 标签可以有多个, style 还可以去配置使用 less 或 sass

6. 单文件组件的优点

1. 在 vscode 中安装 vetur 插件。能够让单文件组件有很好的语法高亮和代码提示
2. 可以将样式写在组件内。并且通过配置还能让样式只对当前组件生效（作用域样式）
   1. 要实现 作用域样式，只需要在单文件组件的 style 标签上设置 **scoped** 属性
   2. 作用域样式是如何实现的呢？审查元素就可以知道
3. 可以使用现代化的 ESM 模块化

写在最后:

vue 是2015年 出现的 开发框架,
vue两大特点：响应式编程、组件化 
vue的优势：轻量级框架、简单易学、双向数据绑定、组件化、
		  视图、数据和结构的分离、虚拟DOM、运行速度快

参考链接

vue 官网