41、前端基础-Vue-组件化基础

接下来我们说一下唯U的组件化，组件化呢，从字面意思那就是着重于我们封装、抽取和复用，其实在我们开发大型应用的时候呢，我们经常有好多功能都是已经写过的，那我们想要再用它，我们无需重复开发，那我们可以呢，将它抽取成一个一个的功能组件，我们想要用呢，直接来复用这个组件就行了，包括我们来开发很多页面，不同的页面呢，也可能有相同的部分，比如每一个后台管理系统里边，它这个页面呢，可能都会有导航，包括我们侧边栏，包括我们的内容区域，等于包括内容区域呢，可能数据模板都是一样的，那我们就可以将这些东西呢，我们抽取成一个一个的组件，那么理想的情况下，我们的页面呢，都是应该由一个个可复用的组件构成的，我们可以通过组件之间的灵活组合来生成功能更强大、更丰富的页面。那我们自己如何抽取和封装一个组件呢？来举一个。

Beat啊，组件化里边，我们这儿呢有一个按钮，这个按钮呢是我被点击了多少次，我们来统计次数，那我把这个功能完整写出来，我们先来写一个script，那我们就应该是new view，创建一个view实例，我们element来挂载我们这个APP元素，好绑定上它，然后呢，我们使用data来封装数据，数据里边呢，假设我们有一个count用来计数，默认呢是一，到底被点了多少次，我们在这来显示一下count，当每次被点击呢，需要触发count加一，那我们可以给它绑定单击事件，用v on click click绑定单击事件，当我们被点击以后呢，我们应该触发count加加，好我们来保存open with live so，我们来看一下效果，现在呢，我们来点击一下这个效果呢就出来了，那我们呢，要经常使用这个功能，我们就可以将它抽取成一个组件。那怎么抽取呢？我们先来说第一种。我们呢，先来使用全局声明的方式，我们全局声明并来注册一个组件，怎么使用这个全局组件呢？我们可以先用view的一个方法，叫component，它还提供了这么一个功能，它呢可以注册一个组件，然后呢，我们需要写一个组件的名字，但名字随便定义，比如我们叫cer，那组件到底是如何的行为，包括它的页面模板长什么样，我们都需要写在这个大括号这么一个对象里边，那相当于对这个组件的一些设置，设置里边呢，首先有一个叫templet，叫模板，那么组件的模板呢，其实说白了就是这个button按钮，这是这个核心，我们把它复制过来。

然后呢，这个button按钮里边绑定了我们这个count这些数量，那么这些数据呢，我们还是一样写在data里边，那这个data呢，我们推荐写成一个方法，这其实跟创建唯有实例的写法都是一样的，包括呢，唯有实例里里边以前能写的东西，比如计算属性等等，全部能在我们这个组件里边来写，唯一跟实例不同的是，我们这个组件呢，是用template来写我们这个组件的模板，而EL呢，是直接挂载页面元素，那一直接挂载页面元素呢，其实相当于就不能复用了，就跟它产生关联了，而我们这个呢，就能复用好，那么这个data呢，我放在这儿，我们真正要返回的这个数据，我们给它return一个对象，与我们这个组件呢，跟这个count数量有关，所以呢，我们返回一个COUNT1，我们初始呢是一，那我们这个组件呢，就声明好了，想要用怎么用，我们这有一个组件名，想要用它非常简单，我们只需要呢写一个这个标签，这个标签呢。

就是我们当时注册组件时用的组件名，我们来保存来看一下页面效果，诶发现这被点击一次已经OK了，包括我们想要使用更多次，那我们只需要在任何位置，哎，我们都来使用这个cter组件就行了，哎们在这呢，每一个独立统计，特别是说呢，我们这一块组件的这个data应该是一个方法的返回，因为这样我们每声明这么一个组件，我们每使用这么一个组件，它的数据呢，都是调用这个方法返回了这么一个新对象，那么每一个组件呢，数据这些数量统计都是独立统计的，那如果是返回我们以前的这么一个对象，那任何一个组件呢，返回的这个对象可能都是同一份实力，那就导致呢，我们可能在这点一下，这变成二，全体都变成二，这其实就没有达到我们组件复用的效果。

那么总结起来，我们在注册组件的时候呢，需要注意这几个细节，首先第一个我们说组件呢，也是一个维有实例，也就是说我们在定义的时候呢，我们以前我有实例里边能定义的这些data也好，Mans也好，我们完全可以在组件这里边定义，而且呢，我们说组件啊，它不是跟页面元素绑定的，所以呢，我们在组件里边不写E，而组件的HTM模板是什么，我们要用template属性来写。另外呢，需要注意的是我们全局定义的组件，我们可以在任何的维U实例里边直接使用，那我们这种方式是全局定义的，特别最后一个，我们组件里边的这个data必须是一个函数，而不能直接在这儿写成一个对象，那这样呢，这是我们全局声明一个组件，包括呢，我们其实还可以来局部声明，局部。

声明一个组件，这个全局声明呢，大家都能用，那我局部声明呢，我们来举一个例子，我还是一个cost，我来声明一个常量，比如呢，我们这个组件，我给它起一个名字就叫button counter吧。好，然后这个组件是什么？我写一个大括号，诶，其实组件呢，那就是这个，我们之前定义过，这是这个组件，Ctrl v al shift f，我来代码整理一下，那我在这儿呢，准准备了一个组件，那我想要用它，这其实就是声明了一个非常常规的对象，我们认为这是一个组件，我想要用它，怎么用呢？我们需要在5U实例里边，我们想要在我们这个APP里边来用，那么在5U实例里边呢，需要有一个属性叫components，也就说呢，我们想要在当前实例里边用哪些组件，我们都需要写在components里边，Components里边呢，还是KV这个建制队，而K呢，就是我们组件的名字，比如呢，我们有一个组件名，我们就叫button counter，好，那我就来写一个组件的名字，Button counter，诶，我这样写，哎，这是一个特殊的名字，所以我这个K呢，就来用单引号来引起来，而组件是哪个组件，那就是它，我来复制一下，那我们。

这一块呢，就声明了我要使用这个组件，那我要如何使用呢？那我们只需要在这写一个标签，还是我们直接来写我们button counter，我们组件名叫什么就写什么，因为我们这个是组件名，我来保存一下，如果我们是使用的我们局部组件，我们就给这个次后边来加上波浪线来区分一下，我们保存重新来看页面来我们这一块呢，也是可以的，这是我们局部生命组件。

那要使用我们的局部组件，每一个唯有实例里边都需要来注册进来，使用components来进行引用。