为什么需要组件化？在实际开发中，我们经常也会封装很多公共方法，达到复用的目的，也便于维护。对于前端也是一样，那么什么是组件？

    官方定义：组件（Component）是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。在较高层面上，组件是自定义元素， Vue.js 的编译器为它添加特殊功能。在有些情况下，组件也可以是原生 HTML 元素的形式，以 is 特性扩展。

    组件机制的设计，可以让开发者把一个复杂的应用分割成一个个功能独立组件，降低开发的难度的同时，也提供了极好的复用性和可维护性。组件的出现，就是为了拆分Vue实例的代码量的，能够让我们以不同的组件，来划分不同的功能模块，将来我们需要什么样的功能，就可以去调用对应的组件即可。组件化和模块化的视角不同：

    可复用组件，高内聚、低耦合。Vue中提供了少量的内置组件(keep-alive、component、transition、transition-group等)，但可以自定义组件。Vue API中，提供了Vue.extend和Vue.component两个全局方法创建/注册组件，还有一个实例选项components，用来注册局部组件。  

    准备好开发工具Visual Studio Code，导入之前生成的项目案例。

项目目录：

    运行命令npm run dev启动项目（npm run 其实执行了package.json中的script脚本）。更多说明参考：https://blog.csdn.net/xiaoxianer321/article/details/114009647

源码：

webpack-将各项前端代码/资源打包编译成.js、.css、.png等浏览器可以加载的资源。

    在使用过程中经常出现编写不符合eslint规范，空格，缩进，各种括号，导致启动报错，真是头疼。

2.3.1、方式一：安装插件ESLint

然后File(文件)->Preferences(首选项)->settings(设置)

编辑settings.json文件将文件替换为下面的选项，就可以保存时自动格式化。

2.3.2、方式二：关闭校验规则

    找到build\webpack.base.conf.js这个文件：

    它是index.js中的一个配置：useEslint并将其值设置为: false,即关闭eslint规则校验。（并不推荐这么做）

    关于组件的创建源码分析，可以参考这篇文章：https://blog.csdn.net/xiaoxianer321/article/details/114340405

    前面介绍过Vue.extend可以帮助我们对 Vue 实例进行扩展，扩展之后，就可以用此扩展对象创建新的 Vue 实例，Vue.extend是为了创建可复用的组件模板，更主要的是服务于Vue.component组件注册。

案例1：

案例效果：

    new  Vue（）,  尽管在Vue官方文档上，在相当多的例子中使用到了创建Vue实例这个操作，实际上它的使用可能并没有你想象的那么频繁，在很多时候，它可能就只在挂载根实例的时候使用到。后面我们接触更多的是组件和路由的使用。

    在Vue 中定义一个组件模板，可以有很多种方式，下面只列出常见的几种：

    一般浏览器不能识别.vue的文件，所以需要vue-loader来加载.vue文件,所以需要基于webpack来开发。

    webpack：前端资源模块化加载器和打包工具，他能把各种资源当作模块进行加载，实际上就是通过不同的loader将这些资源加载打包然后输出打包文件。webpack是基于commonJs语法的。

    vue-loader:会解析文件，提取每个语言块，如有必要会通过其它 loader 处理，最后将他们组装成一个 ES Module，它的默认导出是一个 Vue.js 组件选项的对象。支持使用非默认语言，比如 CSS 预处理器，预编译的 HTML 模版语言，通过设置语言块的 lang 属性。

    传统前端中一个网页应用是由很多html文件组成，每个html文件又分为三部分:

   1）用于展示视图；

   2）用于和用户交互

   3）用于控制视图的样式。

    在vue中，每个单文件组件（.vue文件）也可分为三部分（例如：在App.vue中我们可以看到有：、、）：

   1）用于展示视图：模板反映了数据和最终展现给用户的DOM之间的映射关系（注：一般只有一个根元素，vue初始化之后最终会得到一个vdom树，而树结构必须要求只有一个root节点）

   2）用于和用户交互；

   3）用于控制视图的样式。

    html中的template标签中（html5新增）的内容在页面中不会显示。但是在后台查看页面DOM结构存在template标签。

    在Vue中template模板是用于编写视图(DOM)的地方，一般只有一个根元素，通常根元素都是div。如果有多个根元素需要使用v-if、v-else、v-else-if设置成只显示其中一个根元素；（template标签不支持v-show指令，v-show="false"对template标签来说不起作用。）

    vue中的script脚本中包含两部分，导出和导入。

    历史上，JavaScript 一直没有模块（module）体系，无法将一个大程序拆分成互相依赖的小文件，在 ES6 之前，社区制定了一些模块加载方案，最主要的有 CommonJS 和 AMD 两种。前者用于服务器，后者用于浏览器。而ES6 在语言标准的层面上，它实现了模块功能，设计思想是尽量的静态化，使得编译时就能确定模块的依赖关系，以及输入和输出的变量。ES6 模块不是对象，而是通过export命令显式指定输出的代码，再通过import命令输入。

    关于export和import命令可以参考这篇文章：https://blog.csdn.net/xiaoxianer321/article/details/113485872

    style里和传统的css差不多，不同的是支持了更多的语法，比如scss、less、stylus等，默认是css。

    CSS（层叠样式表）：是一门非程序式语言，因为CSS没有变量、函数、SCOPE（作用域），需要书写大量看似没有逻辑的代码，不方便维护及扩展，不利于复用，尤其对于非前端开发工程师来讲，往往会因为缺少 CSS 编写经验而很难写出组织良好且易于维护的 CSS 代码。为了方便前端开发的工作量，出现了sass（sass技术的文件的后缀名有两种形式：.sass和.scss）和less,sass和less由于使用了类似JavaScript的方式去书写，所以必须要经过编译生成css，而html引用只能引用编译之后的css文件，虽然过程多了一层，但是毕竟sass/less在书写的时候就方便很多。

    在Vue中使用组件，可能需要用到注册组件，它提供了全局注册和局部注册两种方式。

    在全局api中有个Vue.component方法，提供了三种创建全局组件的方法，还有一种私有组件。

   Vue.component( id, [definition] )

参数：

用法：注册或获取全局组件。注册还会自动使用给定的 id 设置组件的名称

案例：

    首先我们在main.js中加入我们要注册的组件，然后在App.vue中直接。

main.js 

This is a head component!

App.vue 

案例效果：

    通过某个Vue实例/组件的实例选项 components 注册，使用该选项注册的组件被称为局部注册。继续使用之前的案例，我们在加一个广告组件。我们将HelloWorld.vue中的内容重写一下，然后在APP.vue中使用。

HelloWorld.vue 

This is a advertisement component!

App.vue

案例效果：

    一个简单的网页，你可能会有页头、侧边栏、内容区等组件，每个组件又包含了其它的像导航链接、博文之类的组件，形成了类似的组件树结构，引用官网一张图：

    组件与组件之间的嵌套使用避免不了数据之间的传递。那么Vue中组件的数据是如何传递的呢？组件间数据传递不同于Vue全局的数据传递，组件实例的数据之间是孤立的，不能在子组件的模板内直接引用父组件的数据。如果要把数据从父组件传递到子组件，就需要使用props属性。在Vue中，父子组件的关系可以总结为：prop向下传递，事件向上传递。父组件通过prop给子组件下发数据，子组件通过事件给父组件发送消息。所以我们也会经常遇到组件之间需要传递数据的时候，大致分为四种情况：

    通过 Prop向子组件传递数据，父子组件之间的数据传递相当于自上而下的下水管子，只能从上往下流，不能逆流。这也正是 Vue 的设计理念之单向数据流(当父组件的属性变化时，将传给子组件，但是反过来不会)。这是为了防止子组件无意间修改了父组件的状态，来避免应用的数据流变得难以理解。

示例：

1）我们先定义好一个父组件（Parent.vue）和一个子组件(Child.vue)

2）Child.vue：我们需要使用父组件的数据定义在props中：props: ['myName', 'myAge']

    HTML 中的 attribute 名是大小写不敏感的，所以浏览器会把所有大写字符解释为小写字符，所以在模板中不能直接使用camelCase (驼峰命名法) 的 prop （myName，myAge），需要使用其等价的 kebab-case (短横线分隔命名) 命名。

3） Parent.vue：在父组件中导入子组件，并引用子组件

4）在main.js中注册父组件

 5）在App.vue中使用父组件

示例效果：当父组件的属性变化时，将传导给子组件，但是不会反过来。修改子组件的 prop 值，是不会传回给父组件去更新视图的。

    通过props传递给子组件的myName、myAge，不能在子组件内部修改props中的值。这样的操作破坏了单向数据流的设想，所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外变更父级组件的状态，从而导致你的应用的数据流向难以理解。但是如果prop改成对象类型，子组件直接修改数据，不会引起警告（因为当参数是对象的时候，传给子组件的应该是类似于指针的一个东西，指向内存中的一个数据空间，而子组件通过 ObjectName.prop 去操作Object的时候，更改了内存空间的数据，但是并没有更改内存空间的位置，指针仍然是指向这块内存空间的，所以不会有警告报错），但还是不建议这样做。

     官网给出了解决方案：

    1）定义一个局部变量并用prop的值初始化它；

    2）定义一个计算属性，处理prop的值并返回。

我们对子组件进行改造：

 案例效果：

    现在修改子组件的，不会影响父组件的传递过来的prop。 

    子组件定义 props 有三种方式:

1.2.1、第一种数组方式

    数组方式：可以是静态的传递字符串，也可以是数字、布尔值、数组或者对象，但是后者需要使用到 v-bind指令。前面介绍过（v-bind 主要用于属性绑定，比方你的class属性，style属性，value属性，href属性等等，只要是属性，就可以用v-bind指令进行绑定），在上面（1.1 通过 Prop 传递数据）的案例中我们就用到了v-bind传递一个对象变量。

1）静态字符串

运行结果：

2）动态对象

运行结果：

1.2.2、第二种对象方式

    使用第二种对象的方式，可以验证参数的类型，如果不符合数据规格，Vue 会发出警告。把main.js中的props改成下面的格式，则控制台出现警告。

运行结果：

1.2.3、第三种对象嵌套对象方式

    第三种嵌套对象中的属性（type、default、required、validator）均为非必须。

    type可以是以下类型，type 还可以是一个自定义的构造函数（如：author: Person）

将main.js中替换成如下所示：

 运行结果：

    什么是非Prop 的 Attribute 呢？（props是properties的缩写，attrs是attributes的缩写）在介绍Vue基础的时候，也介绍过properties（属性）和 attributes（特性）。

    在Vue中一个非 prop 的 attribute 是指传向一个组件，但是该组件并没有相应 prop 定义的 attribute。对于绝大多数 attribute 来说，从外部提供给组件的值会替换掉组件内部设置好的值。但是有两个比较特殊，class，style 不会替换，但是会合并。其他的属性基本上都会继承或者替换。

1.3.1、Attribute 继承

举个栗子：

在main.js中注册一个全局组件

在app.vue中

案例效果：

    在使用子组件时，我们定义了很多属性：【content="hello world"  a="3" :b="fatherMsg" c="4"  class="ddd" style="font-size: 16px;"  title="bt" value="fvalue" id="hh"  name="vcom" dir="ltr"】

    同时在子组件的根元素上定义了：【name='mydiv' id='mydiv' dir='rtl' title='l am div' style='color:blue' 】

    而子组件中我们只接收props: ['name','content', 'b', 'title']四个属性

    子组件中接收到了 ['name','content', 'b', 'title']，但是这四个属性就没有继承/替换到根元素上。根元素的id、dir被替换，a、c、value继承到了根元素上，而class 和 style进行了合并。

1.3.2、禁用 Attribute 继承

    如果不希望组件上的根元素继承attribute，可以在组件的选项中设置 inheritAttrs: false【inheritAttrs-继承属性的意思】

在main.js中加上inheritAttrs: false

案例效果：

    加上inheritAttrs: false，根元素的id、dir依旧不变，且a、c、value也没有继承到根元素上了。但是它始终不影响class 和 style的合并。

1.3.3、多个根节点上的 Attribute 继承-$attrs

    当我们知道了inheritAttrs的作用：是否继承来自父组件的属性(默认继承)，那如果多个根节点或者不想到根节点继承呢？那就要使用到$attrs。我们再回头来看看官网给我们列举的案例：

案例效果：

    prop实现了把父组件中的数据传递到子组件中，每次父组件更新时，子组件的所有 prop 都会更新为最新值。但是不能在子组件内部改变 prop，当然修改是有效的（可以通过this.$parent.name 访问到父组件中的属性），如果你这么做了，Vue 也会有警告提示。子组件向父组件传递数据，通过events - 自定义事件（回调参数）传递数据。

vm.$emit( eventName, […args] )

参数：

触发当前实例上的事件。附加参数都会传给监听器回调。

    [每个Vue实例都实现了事件接口：使用$on(evntName)监听事件；使用$emit(eventName,optionalPayload)触发事件。父组件可以在使用子组件的地方直接用v-on来监听子组件触发的事件。]

   在上一个案例中其实也使用到了$emit。我们先看官网给出的一个例子。 子组件click事件，调用$emit，传入需要触发的父类自定义事件welcome，在父组件中使用子组件时对welcome绑定sayHi方法。

    首先在main.js中定义一个子组件：v-testcom，并在this.$emit('childFn', this.message)中传递一个值this.message

在App.vue中使用子组件：