vue3用class封装方法

大家好，今天我们来分装一个组件，就是这个职工详情的组件，那么其实很多地方用到这个职工详情，比如说我们在职工的调转记录里边 先看职工详情，再或者我们在首页里边下个月计划成也也想看用户详情，那我们不可能在每一个用到的地方都写一遍这个弹框的组架， 所以呢我们完全可以把它封装成一个组件，然后在其他用到的地方去吊用就好了。我们今天就来看看到底如何把已经做好的功能封装成一个组件。那首先呢，我们需要把需要提取的组件的代码提取成一个单独的微有异文件。好，我们来看一下， 我们找到这个页面，页面叫对付的没有意义。好，就是这部分，这部分呢是他的 brt 报的抽屉组件来实现的，我们先把这部分代码拷贝出来，单独新建文件， 那我们放在专门有个 compendence 放在这里面，我们再给他单独建一个目录，专门存放职工的相关组件。然后呢我们再来新建个文件，专门存放这个组件，你叫 stayf 抵抗，然后把刚才复制的这个代码放到 tampay 的里面， 然后呢我们再写一个 squeep 的标签，里边存放一些脚本，再写一个 style 备用。好， squeep 里边我们来写下物价，比如说 sport default， 然后里边写上基本的主驾的名字，比如这个主驾就叫 stayf， 然后呢我们来写上 data， 这里边直接 race， 待会备用就可以了，然后再写慢色， 好，慢色子也放点先备用，然后我们再来检查一下这里边 这个抽屉组件用到的一些属性，比如说这个是否显示这个抽屉组件，然后我们把它拿到下边来，我把它分成两块屏幕 离开，要瘦，我们拿过来，不需要这么这么一个属相，默认是不显示的。然后我们再往下还需要一个这个，这是职工的一个对象， 然后再往下用到的这些方法，我们需要一会处理一下。嗯，那这里面还有一个，这个 还是在这地摊里边，像这种房卖的，他也是从字典表里把竖直转换成文字，所以这些呢，如果我们想让这个组件 足够的模块化，我们有两种做法，可以把这些字典数据查询到这个组件上，然后呢在这个组件展示的时候做一个转移。但是呢这种方法不是特别好，因为有可能这一个页面会频繁的打开职工详情，频繁的关上职工详情，这时候我们需要频繁的去加载这些字典数据，所以不是很理想。所以呢我打算后面我们 把这个数据库查询的地方改一下，直接查出来这些字典数据关联到这些字典表。那这样的话呢，我们就避免了在详情弹框组线里面去频繁去加载所有的字典数据。好，我们先把这些字典数据去掉，先让他能正常跑起来。 好了，一会我们在后台查询的时候， 直接把这些文字的数据查出来，就不用在前台做字典对照了。那接下来的剩下的这些方法我们需要迁移过来，我再来迁移一遍。 好嘞，我把这些方法都已经牵引过来了，接下来呢我们来写一个显示方法， 方法名叫瘦，传一个 id， 然后呢？这里边我们后边要去调接口来去请求这个职工的信息，暂时我们先不掉，我们先把这个弹框显示出来， nice 点比他要瘦，等于出。

好的，我们来看一下二点九的这个题号，他问的问题呢是如何封装组建，那这个面试题呢，是在今年我听到的面试录音里边，尤其是五月份之后啊，听的面试录音 啊，这个面试官呢所问的比较多的一个问题啊，就是封装这个组件，你能详细说一下封装组件的流程吗？越详细越好啊，等等一系列这样一个问题。 那首先呢先来解释一下，很多小伙伴呢会会这个误以为是这样的，比如说这个网页呢，他有这个呃轮播图组建欣赏好歌组建，推荐好歌组建，我们就拿这个欣赏好歌组建来说吧， 很多小伙伴呢会以为是，哎，封装个组件不就是新建一个点 vivo 文件，然后这里边呢放一个 tom later 啊，进行一个我们的盒子摆放，然后呢写这个 c s 四 steal， 写 c s 四做样式布局， 然后呢再给他把数据呢烹饪渲染不就完事了吗？啊，其实呢封装一个组件呢，确实这样，但是呢这个面试官呀，想要得到答案的是你在这个项目中呢，有没有封装一些公共的组件 啊，或者说呢你这个组件啊最好是用到过插槽啊，包括你可能会做副传子，只接收这个数据，就是通信 啊，或者说呢子直接用负的这个数据，当然有些这个组件呢啊，他可能更复杂一下，需要去当前组件，去找他的副组件等等一项一系列这样一些内容， 所以说呢，尽量大家结合自己的这个项目情况啊，来把这一块呢做的好一点，所以说你项目呢需要靠近你企业要难一点，那我这样呢就没办法给大家展开去说你的项目到底有哪些功能， 因为我不确定大家做什么样项目啊，所以说我把这个问题的核心给大家去讲了，也就意思说呢，你这样呢，这个组件啊，一定啊，要啊，怎么说呢？多面开花，就一定要稍微难点啊，然后涉及的这个，嗯，涉及的这个知识点 啊，一定要闲的，最好就是有这个插槽，还有这个组建啊，组建通信啊等等一系列这样内容。 那其实呢，封装一个组件呢，就和封装一个插件呢差不多了啊，就比如说 l y type 啊，这个东西呢，就是可能我们常用的一个插件， 对吧？那你可以明显看出来这是一个组件嘛，然后这个组件里边呢，它又包含两个组件，很明显这两个呢就是一个插槽，包括呢，我们在这个 animaltui 里边，大家可以随便看一下，这有 e l phone， 那么 里边是不是也是插槽啊？哎，就这么一种情况，好，回到我们原题里边啊，所以说呢， 就是这个组件呢，一定要难一点啊，一定要难点，然后涉及到支点，我都给大家列举到这了啊。行，下面呢我就给大家去写一下代码，就是他这种情况可能会怎么做，你看啊，他涉及到组件传知道，比如传个内蒙，传个 title， 然后这什么，呃，这这个地方他有一个负，然后引入了什么插这个 slot， 对吧？ 好，那我们这呢随便写一下啊，来我这呢给大家新建一个，比如说按照我之前的一个 unif 那个插件吧，给大家找一下 那种风格去写就好了。好，比如说按照这种方式去写，当然你这里边也可以包含啊，比如说我们按照这种方式去写，来这个 l s 叉 s type 啊， 好，我们来这呢新建一个 s 叉 s 杠 types 的这么一个目录啊，然后在这里边呢再新建一个 s 叉 s 杠 types 的一个点并文件啊，这是我们的这个插件的一个本体啊。 好，那我们在这呢进行一个引入啊，就是 import， 呃， s 叉 s types from， 去我们的 company 词里边去找一下。 好，然后这儿呢我们就 companies 好给他用起来。 ok， 然后呢，你看我们这呢传了几个值，比如说这个值呢，就是我们要做一个选项卡吗？然后一二三四的选项卡，然后这个值呢，他 默认值呢是一个一，就是说我上来呢默认第一个被选中啊，给个一，当然是四五串或者数值都无所谓，他可以接受类型。然后这个 atmos 呢？嗯，呃，就是我们的一个内容啊，这个内容呢，我可以把数据拿过来。 好，就是一个数组，然后里边有 label 啊，就是每一项，然后再往下那个 options， options 呢是针对于这儿的一个选中的颜色，我们可以先不配置，然后这儿有一个称值，这个称值呢就是我们的。呃，这个点击那个切换就 types 的时候 啊，他所执行的一个事件，我们这呢有一个 e， 再加个打个 e， 这会接收到一个仓数。 好的，现在我们就去，呃，封装，那当然呢，首先我们肯定呢是要接收到这些值的，来我们这接收 录下 export 啊， different l props， 当然写插件呢可能要加很多注释啊，我们这呢就先不加了，然后这呢有个 type， 这个 type 呢，它类型呢，可能是一个 never， 可能是一个 stream， 然后它的一个默认值呢，我们可以先给成一个一。好，然后再往下呢，它是一个 items， items 呢，它是一个数组 啊，然后里边返回的一些内容的话呢，我就先不给了， 那就默认一个空数组吧。好，那我们先接受这两个值。 ok， 然后呢，我们的 type 四呢，它是个数组，到这呢，我们肯定要循环，对吧？比如说我们这儿写个 d i v， 然后 v 杠 four 啊，等于 于这个 item 印一下我们的 types 啊 items， 然后这儿的 k 呢为 index。 好，我们把这个 item 的 label 啊给它翻过来。 好，我们刷新一下，你看这些内容呢，他就算是进来了，对吧？哎，这儿有一个报错啊，应该是我们那个啊称职的一些问题，我们这儿呢，不应该叫称职啊，应该叫憨豆称职。然后这儿的 open 字我先不要了。 好，然后呢，现在我要给他做个布局，让他们呃，就是在一行，或者呢给他一个呃 types 吧，哈， steal 啊，然后这儿呢有一个 scoped， 对，他们就在一行了，然后呢，它下边呢，是有这个 d i v 的，我就随便写一下布局了哈，拍逆值上下左右都来个三十 p x， 当然有点大 行。没关系啊，咱们大致的看一下就可以了，这布局我就不去调了，那肯定是要加呃 repeat 之类这样东西啊，先不调了。好的，然后呢，现在呢，我们这呢就可能会设到一个点击世界嘛，对吧？就是点我们这个元素， 点这个元素，点这个元素呢，我们就要加一个 click， 比如说我这儿写个 btn 啊，随便写的，然后把这个呃 index 给它传过去啊，这儿呢就有一个 message 啊，这里边呢要写个 btn， 对吧？然后这儿呢我会接收到那个 index， 当我点它的时候呢，我需要做一个事， 这就是 amit， 然后这有个趁着事件，然后把 index 传过去，那这种情况下呢，他就会接收到啊，他就会接收到，就是子写了一个 amit， 然后这个父呢就会接收到这个 e， 这个 e 呢就是在 index， 所以说呢，我在这儿点，你看他就能接收到啊，这就是我们的这个啊内容啊。 好的，然后呢你可以再去写更多东西，比如说默认是第一个选中，对吧？选中加一些这个颜色值啊之类的都是可以的。我这样呢就不展开去说了啊啊，这是一种使用的方式 啊，当然了，可能呢还会涉及到，比如说 alum t u i 啊，或者说刚才我们看到这种方式，那这种方式呢它就会有插槽啊，那我这呢也给大家举个例子，比如说我写一个叫 l i type s 吧，哈， 哎，他 里边呢可能有一个 ioy types 的 item， 对，那这个东西呢，它显然就是个插槽啊，当然我们这呢需要引入下这个组件，一会我去新建一下啊， 把这个打写好，然后这儿呢还有一个 item， ok， 好，把这个加进来。好，当然我们这边封装是一个组件啊，不是这个插件，所以说呢，我们这个地方呢，本身在他 里边，在它里边就可以了啊，只不过呢，我们这就先这么写吧， 这个呢就是我们插件的一个本体啊，好，大家可以看一下，当然我们这呢他会报错，其实呢已经存在了啊，这样我把那个组件呢也新念出来， 我们叫 l y， 呃， types， 那这个名儿还错了， 然后这个叫 item， 好，我们这儿呢，这个叫本体， 嗯，看一下 l y types answer， 这有一个小问题，我们找一下 home 是，嗯，这个文件没有找到 哦，我们这个目录叫 type， 把这目录改一下吧， 都统一一下这 types 啊， types 保存 好， ok 了，你看这个本体进来对不对？然后呢我这个内容怎么不显示啊？ 这个内容呢是属于插槽，对不对？你所以说呢，你这儿要写个 slot， 而这个 slot 呢，呃，就是就是我们的，哎，我保存一下啊 store， 这个 slot 呢，就是就是它，它呢就是在这个地方，对吧？就是这个地方，所以说呢，现在呢，呃，它肯定是二十，没有问题的哈，我们看一下啊， 好，他就会显示出来一个 it， 当然如果你有两个的话呢，他就会显示两个吗？对吧？比如说，呃，刚才那个地方显示两个啊，就剩下两个，当然你在这的每一个给他传值对应的组件去接受这个值就可以了，他其实想要得到答案呢，是这个，当然更复杂的一些组件呢，他封装起来呢就更复杂 好了。不管怎么样呢，他就无非几种技术，第一种就是父传子，第二种啊，子传父，你，你把这个纸传给子，然后子呢？可能啊还会给父去传，比如英米子传一个自行事件， 然后呢我们这呢还可能说用插槽，对吧？像这种插槽啊，一个一个连接起来，一个种关系，所以说呢，大家一定要介绍 封装组建的时候呢，结合自己，你们就是简历中不是可能要写项目吗？或者说你们做项目吗？啊，把那些呢重点介绍一下啊，不要误以为就是很简单。好吧，你这个项目呢一定要难一点哈。行，就这么着。

好，这里呢，我用一节课几分钟的时间，让你彻底搞清楚在 view 里边使用样式的几种常见做法。首先呢，它自然就是在组件里边直接写一个 style 标签，然后把所有的样式给它写到里边去。 这种做法呢，看上去可以实现这个效果，但是呢，这样做容易导致内名冲突，因为将来呢，我们组建一多，你保不齐这些样式的名字有冲突了啊，管你使用什么样的命名规范，都不是一个特别稳妥的方式。 那么这里应该怎么做呢？我们可以给这个 style 元素啊，加上一个属性，叫 scout， 当然了，不要忘记啊，这些东西啊，全部都是交给构建工具去看的，并不是放到浏览器里边执行的，没有哪个浏览器能够认识这个玩意， 不要说这玩意了，他连这个玩意都不认识，还有这个玩意是啥也不认识，所以说一定要记住工程化的知识哈，这些玩意都会经过编译 变成正儿八经的 g s 代码，这些 c s 代码呢，会被提取到一些文件里边去。好，当你加了这个 stop 之后啊，我们看一下效果，效果呢，仍然是没问题，为啥这样就可以避免内鸣冲突了呢？我们来看一下这个 vivo 脚手架，他做了什么事情。 从这里可以看到啊，当你给这个组件加了 scopter 之后啊，他会为这个组件里边的每一个元素加上一个特殊的属性。这个属性啊，他能够保证不同的组件他是唯一的。 这个组件里边的所有元素，你看，里边的哀元素也被加上了这个特殊的属性，而且值呢，也完全一样，他要干什么呢？他加上这个特殊的属性，就是为了给这个组件里边每一个选择器啊， 给他带上这么一个属性选择器。你看这个类选择器，他被带上了一个属性选择器，那么这样子呢，就非常精准的选中了这个组件下边 这个 starrate， 他就不会对其他组件造成影响，因为其他组件这个值不一样啊，这个选择器选中不了他这个选择器，他只能选中这个组件里边东西，懂这意思吧？ scops 这个单词的意思呢？就表示在某一个范围内的意思，那么这些样式呢，都被限制到了这个组件的这个范围内。 好了，有朋友说我不仅仅要用它，我可能呢，还想在主线里边使用一些欲编意器，像什么奈斯啊，萨斯啊， style 斯啊，那么这些玩意如何在无忧里边做呢？其实啊，无忧可的呢，他已经帮你考虑好了这一点， 你要做的就是去安装这些预编仪器就够了。比方说吧，我们要使用 sas 作为预编仪器，那怎么弄呢？安装两个东西， sas 和 sasloder 啊，这是 sas 的核心库，这是 sas 呢，跟外派的结合的库。因为我知道 view 颗粒啊， 它里面就用的是 vipad， 你把这两个库一安装啊，就可以直接使用了。那么具体怎么使用呢？你只需要给这个 style 做一个标记啊，叫 number， 给他设置为 size 就完事了，这里边就可以使用 size 代码了。比方说我们把这个玩意给他加到这里来去啊，这个玩意也给他加进去。好，咱们来看一下效果啊，行不行？ 你看是不是也没问题，能够正确应用进去，当然了，你就可以使用砂石里面各种神奇的操作了啊。这里顺便说一下啊，就是如果说你这个 style 标记的 scout， 由于他每一个选择器后边呢，都会带着一个属性标记，所以说呢，你这个欠套呢，其实就没多少意义了啊，就不用写欠套了， 因为写签套的目的不就是为了避免重名吗？那现在不会有重名问题了，那你可以不用写签套了，没问题吧？好，那么就剩最后一个问题了，有些公司呢，他希望把这个样式啊，不要写到单组件里面去，每个组件单独形成一 样式文件，专门来写这个组件的样式，因为有可能这个样式比较多，写到单文件组件里面呢，可能会使得这个代码呢比较臃肿，希望单独提出去。那怎么提呢？非常简单，一提就完事了。比方说啊，我把这个代码复制一下 好，然后在这里呢，新建一个文件，给它取名为同名文件吧， starrate， 当然你取什么样的名字都可以啊，叫 c s s， 如果说你是萨斯的话，那就是 s s s s 啊，都行了啊， c s s 吧。然后呢，把这个样式呢给它转过来， 好把样式提成了文件之后啊，我们需要在组件里面去引入他怎么引入呢？我们可以写一个 style 元素，还是熟悉的配方，是吧？然后他提供了一个 src 属性，可以引入，这个 css 好保存， 你看是不是又出来了。但是呢，这样一来呢，他又出现了这个问题，就是没有特殊属性了，容易导致内名冲突。那怎么办呢？可以再加上 scout， 你看是不是又出现了啊？这些呢，都是在无釉里边使用样式的几种常见做法啊，你们以后公司到底用啥？那我不知道，大概率呢，都是这几种，如果说超出了这几种的范畴，那比方说要使用什么 pose css， 再比方说要使用什么 css 啊？使用一些别的方案的时候呢，就需要一些工程化的知识了哈，需要自己去做一些配置，都是可以实现的。因为整个这个无油颗粒啊，他就是用 vipad， 你如果说懂 vipad， 那就无所不能了，想咋玩咋玩。不过呢，常见的方式呢？就这么一些啊。

好，注意看，我们静态页面上呢，有这么一个星级评分，它的 atm 呢，非常简单，就这么几行，它的 c， s， s 呢，也非常简单，就这么几行。 现在我们考虑一个问题，就是我们的页面上啊，到处都可能会用到这个星级评分，还不光是这个页面，将来别的页面也会用到，那怎么办呢？那按照过去的做法，我不得不去复制这一块代码，多复制几遍呗，对吧？复制一次，那就用了一遍呗， 这样子做呢，也不是不行，只是呢，恶心，这只是一处星级评分而已，你考虑到页面上这么多的区域，你能都这么干吗？ 而且呢，现在还不涉及到 gs， 涉及到 gs 更麻烦，你光复制个 atml， 那 gs 咋办呢？他控制的到底是哪一个区域呢？所以呢，按照之前的分析，这应该进行怎么样主见化？那么既然我们讲的是 view， 那么以无忧的主见化为例，看一下在无忧里边，如何来把这个区域提成一个主见。首先呢，我们写一段 gs 啊，导入这个无忧。 好，接下来我们来定义主见。定义主见呢，你可以把它想象成为函数，声明你得先有一个函数，然后再去调用，再去使用他，对吧？主见也是一样，你先得有这么一个主见，如何来定一个主见呢？其实主见的本质就是一个对象，你可以用个变量来接受一下。 其实严格来说，这个对象呢，叫做组建的配置对象，真正的组建呢，实际上是一个无 you kongpoint 的实力，所以很多人呢，把这个玩意直接把它当做组建，这是不准确的。 严格来说，它应该叫做组建配置，通过这个配置，唯有会自动帮你创建，唯有 component 的实力， 这个玩意才是真正的主见。不过一开始呢，我们先暂时不考虑这个，以后我们分析到 vivo 的进阶部分呢，再去详细聊这个东西。好，那么这个玩意既然是一个配置对象，他到底配置啥呀？其实呢，你们在之前学习 ville 的时候，刚入门的时候是不是一定用过这么一个代码？这个玩意是不是就是一个配置对象啊？ 这里边是不是可以配置 el， 还可以配置什么 data， 还可以配置 message， 对吧？那么现在我告诉你，在组建的配置里边跟这个玩意差不多有一些区别，但大体上差不多，我们在一开始学习组建的时候，不仅要学习组建的各种概念， 在代码层面呢，就是要学习这个配置该怎么去玩好。那么首先呢，我告诉大家第一个配置就是 template 组件用来干嘛的？来抽离页面中的一个区域的，对吧？那么这个区域里边不得有 atm 吗？ 那么这个 it 面在组建里边可以表现成为一个字符串，这里边其实有些深入的东西，我们后续再聊，你先可以简单的理解为他的 it 面就是一个字符串， 所以呢，我们既然是一个星级平分的组件，我们就把这个组件的 itml 给他粘过来，好一个最简单的组件就制作完成了，这个组件里边其他啥也没有，就封装了一段 itml， 整个形成了一个配置对象。好，写完了之后保存，我们来看一下页面上有东西吗？是不是啥也没有？ 为啥啥也没有啊？因为你只是写了一个普通对象而已，这只是一段再普通不过的 gs 代码，它里面有一个属性叫腾不列车，怎么样嘛？不会发生任何事情的。 所以说接下来呢，你要使用这个组件有一个前提条件，你就必须得让吴佑知道。哦，原来这个玩意是一个组件的配置，我还以为你写着玩的呢，对吧？ 让无忧知道。那么这个让无忧知道的过程呢，就叫做组建注册，得告诉无忧他是一个组建配置。那么如何来进行组建注册呢？有两种方式，第一种呢叫做全局注册，我们可以使用无忧构造器里边有一个方法叫 component， 传入两个参数，第一个参数呢是一个置物券，给组建取一个名字。 第二个参数呢就是组建那个配置对象，你可以把对象直接写到这，也可以呢，像袁老师这样子，把它定义成一个变量，把变量名写到这不一样吗？然后就是给他取一个名字，取啥名字？你随便呢，比方说我给他取一个名字叫 star read 啊，用短横线命名法。那么这句代码的作用就是告诉无忧，听好了，我现在大声的告诉你，有这么一个组件，他的名字叫做这个，由于我是全局注册，所以说将来在任何其他组件里边，只要你受无忧的控制都可以 使用这个组件，如何使用呢？啊？到界面上去，只需要以组件的名字作为标签名， starrate 完事了，你看是不是就出来了。目前天文的感官呢？就是他会把这个组件里边的 atm 代码渲染到这个位置，没问题吧？那如果说我们要做多个星级评分呢？接着写呗， 保存，你看这里多个了，哎，这这样的代码结构是不是更加的简洁好，这是第一种组建注册的方式，第二种方式呢叫做局部注册。 局部注册如何来书写呢？我们需要在具体用这个组件的地方，比方这里我们要在唯有实力里边用这个组件，那么我们需要在这里边去写个配置，叫 component， 写的方式也一样，用他的属性名作为组件的名字，用组件配置对象作为属性的值，对吧？你看跟这里说道理是一样的，给组件取个名字，然后呢， 组件的配置对象，这里也是给组件取个名字，然后组件的配置对象，那么这样一来，在这个实力里边也可以使用这个组件保存，你看仍然有效。那么至于说这个全局注册和局部注册到底有什么样的区别， 将来我们在开发当中到底使用全剧注册好一些呢？还是使用局部注册好一些呢？这个问题先暂时放一放，因为这一块涉及到一些工程化的知识， 袁老师可以暂时的告诉你，在开发当中尽量使用局部注册，少去使用全局注册，将来呢我会进行详细的解释。 路得一步一步走，知识呢得一口一口吃。主见是一块非常庞大的知识，不过呢，通过这节课，我们已经能够初步的体验到主见的威力，就这么一个简单的主见，他就可以减少我们很多的代码。当然这个主见里边还有各种各样的问题，我们一步一步来处理。

这个视频呢，我们来说一下在 video 项目里面该如何去封装全局的一些组建， 那么我们可以打开咱们的项目啊，比如说我们就在 ipad view 这个页面当中呢，去引入咱们封装好的这个组件，好吧， 那么该如何封装呢？首先我们可以在 components 里面去新建一个 box 点 view， 当然这个名字或者说里面的样式呃是怎么样的，可以自己去设置，明白吧？ 好，我们写好样那个框架之后再去写样式。样式写完之后呢，我们来看这里呀，是要给页面传递一些参数的，对吧？你比如说你要确定呀，你要取消啊等等，那么这些呃按钮，对吧？确定 按钮他的一些操作是要干嘛呢？我要把这个弹窗哎给关掉，或者说呃，点击确认之后，我应该是要发送数据还是要拿到数据，对吧？ ok， 那在这里呢，我们是主要把它的逻辑呢写在了这个 box 点 gs 里面，因为它是一个弹窗嘛，对吧？就是让用户去确定啊，或者说去取消呀等等的一些操作。 好，我们回到这个 app 这里，是不是我们在调用某一个呃组件的时候，他 它呢是会返回给我们一个 promise 对象，那么在 box 这个里面呢，我们也返回的是 promise 对象，如果 ok， 那就 resolve， 如果不 ok， 那就 reject， 对吧？ reject 这里有一点点问题啊，好，那在这里面呢，也可以哎，就是你点击确认，或者说点击取消，我们要让页面上的这个弹窗进行显示，或者说隐藏等等， 这个是咱们的逻辑的写逻辑的地方，那么这个页面呢，是咱们这个组建的，嗯，显示内容， 明白吧？最后呢，我们把它挂载到 vivo 的是那个圆形上面，也就是在命点 g s 里边， ok， 我们可以我们可以先来看一下它的这个样式。啊，就是这个样子的，确定要退出吗？哎，确定，或者说返回，对吧？来返回 就返回过来了，那么当我们要退出的时候，他会进行一些后面的一些操作，那就是在这个里面了，我们嗯就应该把自己的业务逻辑写在 box 点 gs 里面，在命令当中呢给他进行一个引入，最后在咱们页面当中 就可以去使用咱们的这个封装好的组件了，也可以给他传递一些参数。 好，那回来之后呢，我们可以看一下，这儿用了一个 element u i 的一个八层组件，对吧？ 然后呢，呃，这个是咱们的封装的这个组件，当然结构什么的都是自己怎么喜欢怎么来，还有 box 点 g s 写逻辑的地方，哎，全局引入一下，这样的话咱们就封装好了一个属于自己的全局组件。

有粉丝在评论区说可以出一期组建封装的吗？可以安排这里以饿了么用爱弹窗组建为例，组建的二次封装一般要求用法一致，也可以扩展接口， 目的是解决公共组建默认样式逻辑统一问题，减少重复代码。你是如何封装的？评论区见原码在我的博客。

接下来讲什么问题呢？什么是主教化开发和模块化开发？他是两个概念，两个概念啊，哎，因为这个咱得分开啊。啊？先说这个主教化开发啊，主教化开发，比如说我现在写一个这个 应用，比如说这个系统里面是一个这个页面，然后呢？他有什么呢？有一个海底有个头部，有他头部，然后他还有一个侧边栏，侧边栏是一个菜单啊，菜单呢？咱就叫啊，一个耐还得有一个主体内容，对吧？这主体内容呢就叫 啃趁他那一个应用系统，基本上好多应用性都是这样的，大家大家可能看你们什么学校的一个选课系统啊，或者说那个办公司的欧威系统啊等等，基本都是这个时候啊，上面那个嗨点里面可能会有一些啊，比如说一个登录啊，一个一个用户的一个头像，然后这里有注销菜单， 个人信息等等等等，然后这个菜单呢显那个什么呃基础数据啊，什么各种业务啊等等等等，然后你点击这些菜单的时候，呃，主要的内容会不断的更新，对吧？基本上系统他都是这个思路，是吧？啊？所以说 咱们就用这个思路来给大家讲一下。呃，什么是组件化开发？组件化开发，大家想一下，我现在这个这个这个程序的话有几个组件啊？按刚才人的思路是不是有三个呀？一个是 happy， 一个是 nice， 一个是啃衬他，对吧？好，那咱现在就创建三个组件。那我组件写在哪啊？ vivo 的 v you 的程序，大家记得组件我写到康普嫩词，康普嫩词就是组件的意思， 咱写的程序呢，都放到这个康普顿词里啊，那我现在去建三个组件，第一个组件呢就叫嗨点点 beaut， 但是这里有一个问题，就是说组件的名不要和标签的名一样，一样的 话就会包错，所以说这个东西我就不能叫海胆点比我了啊，咱可以换一个，比如说咱叫麦嗨点点比我，对吧？我加我所有的主页，加一个麦，加一个麦就好了。麦嗨点，那他麦嗨点有什么呢？咱就简单写，就写一个这个 logo， 有个 logo， 然后 下面还有一个这个 a 圈啊，用户信息啊，海底里面就就这两个，写一个 spa 吧，写两个 spa 吧， spa 省的换行的吧。啊？ logo 和这个 spa 用户信息 好，然后嗨的有了之后，我再建一个组件。刚才咱们说这个图啊，咱是不是要建三个组件，还有一对耐磨和 ctrl， 对吧？那创建耐，那这个是菜单的话呢，咱参不累他，咱就写一个有点菜单样，是吧？啊？比如说咱，咱比较喜欢起一个 水果立表这个菜单，那就香蕉、苹果、鸭梨。如果说大家真正做系统的时候，这个菜单可能是一些什么跳转的一些页面啊，比如说技术数据啊，或者说权限管理啊，用户管理啊，这这类的啊。然后还有一个内容，内容就是 maccnt 点 biu， 那这里写一个 h 一，就写一个 helloword， 再写一个别的也行， 写一下吧，这个是应用的。呃，主体部分好，那组件都写完了啊，其实大家以后开发组件化开发也是啊，就是你把这个结构想好了之后，然后你会新建一堆组件啊，然后每个组件的功能都写完，然后把这个组件啪一拼，拼接成一个系统就 ok 了。 好，那然后咱接着写啊，那刚才咱是不是根组件是这个 vivo 啊？那我是不是说直组件都要放到根组件里啊？那这个写的话，咱就写一个，用这个根组件 去搭一个框架。搭个什么框架呢？就是咱刚才写这个嗨的左侧菜单， nice， 中间啃衬他搭一个这个框架，那咱就写一个 div， 那这个呢？克拉斯等于 开点，第二个呢？咱就叫 canting， 这个是一个容器啊，就是说 catty 是什么呢？是这个第二层这个容器，这叫 ctrlant， 这里面有两个， 一个叫内务，还有一个呢，叫啃蹭蹭。好，那这个结构有了，结构有了，然后咱们现在把这个整体的页面功能给他实现了啊，分区给他分。好，那咱就需要在样式里写了，对吧？样式里的话，那就是点嗨歌，咱们给他加一个高度啊，比如说这个高度是八十 像素，然后给个边框啊， epx， sorry 的 red， 随便给个颜色啊。好，他洗完之后，咱看一下现在的 程序啊，来看是不是有一个红色的边框呢？看到了吧，但是这红色边框他他他是一个，上面一个距离，对吧？这个距离是默认的一个刚才的样式啊，在这啊，音带个字 css 啊，这是创建项目，头是自带的，咱把它干掉，不要他了，保存啊，干掉之后，然后看一下现在的英雄程序，哎，回来了，到顶了，这是头部，对吧？头部有了之后，那左侧菜单呢？第二层呢？是点天津，点天津点我设一个 flax 布局， supreme， flax 让他横向排列嘛，咱就不用浮动了，对吧？然后这个 ctrl 那里面呢？看他这 ctrl 那里面，左面有个奈务，右面有个跟衬他， 咱就写写一下他俩的样式啊，那就是点看清点，然后点左边的 nice， 他是 flax， 咱给个一，然后包对 epx 手里的给一个蓝色啊，然后下面这个长青柠里面的这个跟衬的内容，咱给他 flax， 给一个五啊，让他宽一点，然后这个包点一 px sorry 的给一个呃， carry 吧。绿色咱给这个 nice， 给一个八百像素。但如果真做系统的时候，你这个高度你得适应屏幕啊，或者是按照甲方的要求来做啊，咱不能随便给这个尺寸，对吧？那好，那看一下结构 是有了，对吧？上面红色的嗨点左侧的奈姆，右侧的一个呃，这个，这个啃衬他，对吧？然后咱说主间化开发是不是就把主间拼到一起啊？啊？好，那咱现在就需要把主间都引到根主间里面把直主间都引到根主间里面，那我们这里就需要 新铺的先引这个 mary happy tom 哪呢？这个斜杠蹭蹭康城康普能吃 啊？斜杠他这里有一个麦嗨点，这咱刚才创建的，对吧？点不有，我粘贴一下。然后第二个呢？叫什么？第二叫麦耐，第三个呢？叫麦 肯称啊。需要先注册主件，对吧？注册主件，那我已经注册一个 hellowor 的，但是这个 helloword 咱不注册也行，对吧？咱也用不上他了啊。然后咱需要注册这个买嗨的，然后，然后注册这个 man， 然后注册这个 maccnt， 然后我现在需要把这三个组件把它放到上面的这个内容里面，对吧？啊？那咱刚说嗨点嗨点里面我放的就是嗨点这个组件 内容了，然后下面呢是这个是 nice， 对吧？菜单对吧？水果鸭梨水果列表对吧？啊？那 man， 然后下面的这个是 ctrl， 那就是 m a ctrl， 这个是 m， 对吧？哈哈，好，那咱给他改过来啊。呃，引入的这个康不能是，这个是写成 n 了， mm 好保存，然后再看一下效果刷新 好了，那这样的话，咱就三个组件就把它拼到这个应用里了，对吧？那首先是 logo 信息，用户信息在海底里，然后左边是一个菜单，右边一个主题内容， 那这个其实就是组件化的开发，组件化的开发呢，咱就可以通过这种创建组件的方式，咱建三个组件，对吧？然后把这些组件呢，最后拼到一起，拼成一个应用啊，这就是组件化开发的一个基本概念。当然如果说咱真正开营 开发应用的时候，会有一些问题，比如说某些组件呢，会有一些船只啊，会设置陆游啊等等等等这些获取数据啊，这些东西。但是好处是什么呢？就是如果出现问题了，比如说现在，你说说，哎，中间内容 helloword 出现问题了，那咱们直接就定位啊，我直接改这个麦啃衬他就可以了。 这这就两行代码啊，比如 hellowor 的，我给他改了，改成 hello vivo 了，就这两行代码保存，然后整个系统再看，哎， hello vivo 就变了，这样的话咱就成功的把功能给他拆分开了 啊，那哪些组件有问题就改哪，而不是说像以前的话，咱可能套模板呢，写了一堆贴毛啊，这个页面写了三百行一贴毛，或者说两千行一贴毛，然后还有一堆 gs， 需要去一个一个找问题，那个太难受了。但如果说组件化的开发的话，你可以把整个应用拆分成很小的组件，那 出问题就写哪，哪出问题就改哪，这样的话就开发效率就高了，这就是组件化开发的概概念，刚才咱讲的呢？是组件化开发，那什么是 模块化开发了？刚才咱是不是说两个问题啊，对吧？一个是组件化开发，一个是模块化开发啊。什么是模块化开发呢？模块化要咱举个简单的例子啊，就比如说如果我想实现一个功能啊，这个功能 他可能不需要去创建主页，比如说我现在这个功能是啥呢？我就想计算两个数的加和，那这个不需要页面，对吧？他是一个功能，那这个功能的话我怎么写啊？我可以在这，比如 s 二 c， 咱所有的声音都写到 s 二 c 里。 sst 里面，我新建一个梦露啊，这个随便起名啊，随便随便起名，比如说我就叫 utuse， 就一个工具，一个工具的一个梦露，那这里呢？我就 可以创建很多个。呃，工具工具的话，我们可以创建成一个 gs 文件，比如说叫 sum 点 js， 然后这个 sum 的 gs 是一个函数，翻个身，然后 sum 函数 等于什么呢？等于这个里衬十加上十加上二十啊，然后我现在写的是一个功能模块，对吧？叫 sum bs 啊，我需要把这个功能模块给他暴露出去。 暴露属于怎么暴露呢？呃， e s 六的模块化语法啊，就是 expoxd fox 啊，暴露这个 sum。 那这样的话，我在 康不能自理的啃蹭的啃蹭的，大家看啊，这是不是？呃，这是一个组件，对吧？主体部分啊，在这了，主体这部分啊，这个组件我希望在这啊。 h 一输出一个结果。 输出一个什么结果呢？输出刚才咱们模块计算的结果。好，那这个咱就写了 surprax boxd box， 那咱就需要自己写一个模块啊，那咱咱自己写这个模块的话，咱先咱咱现在自己写这个模块，我现在需要，需要实现什么功能呢？需要让这个 h 一里面显示啊， 显示刚才咱们模块计算出来这个结果，结果就三十，对吧？显示这个三十啊，那这个怎么写啊？我需要引入那个模块音 pose， 引入这个 sum flom 从哪引入呢？从这个 utus 啊，然后它里面有一个 sum 点 ts。 好，那拿到这个模块之后啊，然后呢？我现在写一个计算属性， ctrl d 的，那计算属性我可以写一个单本，直接在这就可以绑单本了，对吧？但是计算属性他是一个函数，是吧？我需要通 我计算得到这个值啊，那这个值怎么得到呢？ reaty 谁呢？ retexum 雕用括号。那我其实就是调用了这个模块，得到了这个模块计算的结果，然后把它放到单模上，然后我们看一下效果来，三十出来了，这个就是模块化化的一些方式啊， 就是说我可以单独定一个功能模块，这个功能模块可能是，呃，一步请求数据啊，可能是完成某些功能啊，可能是做了某些事啊，咱不管这个事是什么，咱只要知道这个模块做了一些事， 他跟这个呃页面可能是没关系的，他就是做了一件事，然后我们的组件呢，就可以去调用这个模块，然后引入这个模块去做一些事啊，去完成这个工作，这就是模块化开发的概念。而且模块化的话他会用到这个 enpout 和 expot， 这是 es 二零一五提供的 模块化的语法啊，所以说我们通过这种模块化的方式就可以把程序拆分成不同的。呃，功能啊，有的时候大家为什么混呢？就是说， 哎，你这个主件化开发也是拆分，模块化开发也是拆分，那他有什么区别呢？啊？这个简单介绍一下，就是说主间化，他其实说的拆分还是页面层面的拆分啊？就比如说这整体的页面我拆成了三个主件啊，那组件化开发其实就是拆页面，那模块化开发呢？是拆功能啊， 拆功能我可能一个主件我可能有多个模块，而一个模块呢，我也可能用到了多个主件之上，所以说这是他们之间的关系，这就是主件化开发和模块化开发，模块化开发的一个基本概念了。

我之前在介绍我由于户口的时候，那很多朋友留言人说为什么管他叫户口？人家官网给的明明是组合，是 api， 我看到这个问题的时候，我也是疑惑了一下， 是呢，我又去多找了一些关联性来看一下为什么大家把它叫成户口。首先这个组合式 api 啊，从他的编码逻辑上跟 rex 的户口是非常的相似，那 rex 我们在他的中文网站上看到他明显的就叫库克。 还有一点，你看瑞瑞克的户口，他所有的 api 都是以柚子开头，这是人家的规则，但是没有也没有这样的一个前缀的规则。但是我们来看两个业界比较常用的户，首先是瑞瑞克这个库，我工作当中也会用到，叫 ahops， 这里边都是基于瑞瑞克的户口封装的，一堆户口 都是自建议户口啊，有非常多的功能。然后我们再看无忧易的这个无忧易柚子，咱们就从这个命名上来看，是不是有一些共性，我们把他的 前缀都命名成了跟 reax 的一样的命名规则。那最后我还发现在 reax 的官网上面，我们在这里搜索户口，他会有一个文章叫和 reax 的户口的比对，他也是和 reax 的户口进行了一个比对，这里分析了他的一些区别，基于以上三点同时期命名雷同， 再加上官网也有进行比对，所以我们把这个组合式 api 叫成户口，在工作当中也是比较常见的，好像也不会引起什么奇异，是吧？大家都懂。

哈喽，各位观众朋友们大家好，今天我们来学习维三的第十八章义不组建代码分包以及撒斯判死。那撒斯判死跟胎力泡车是一样的，都属于维三新增的一个内置足劲， 只不过嫂子判死呢，目前处于这个实验性阶段，未来呢可能会有些变动，但是变动呢不会很大，所以说大家使用的时候呢，一定要注意一下，那这个异部组建呢，一般应用场景是什么呢？那我们来看一下这个 alemluy 提供的一个案例， 其实这个东西呢可以配合我们这个股价品，可以做一些小东西，我们来看一下，那就是我们有这个数据请求，那请求之前呢，我们可以先给他展示一个股价品， 然后数据请求完成呢，再渲染我们这个真实的一个数据，那这样用户体验呢就会非常非常好。那今天的话，我们就来写一个股价平的一个案例，配合一部组， ok， 然后我是提前把这个布局呢，已经是给大家做好了，就是这个 sink 点 vivo， 然后他大概是长这样子，那主要是节约这个大家时间，因为 css 大家肯定也是会写的，就是一个卡片，然后呢是有一个头像，这， 然后下面是有一堆描述，这，这有一堆描述，然后还有一个名字啊，年龄啊，大概就是长这样子的一个呃卡片，然后把这个骨架屏呢也是做好了，就这个 skyline view， 然后就跟这个 animus 其实是一样的，大概就是长这种东西， ok， 那我还把这个数据呢也是准备好了，在这个对待人阶层是放到这个帕布里下面，因为放到这个帕布里下面呢是不会被编译的。其次的话就是可以直接去访问到，然后我们定义了一个对象，然后对象里面有这个内属性以及 a 制，还有这个头像， 还有这个描述，那我们可以来实验一下啊，就是通过杠等于它是结算对，它是可以直接去访问到的，所以说我们就把它放到这个趴窝里下面， ok， 然后我们再写一个这个封装一个请求吧，就一个 xo 啊，或者大家直接引入一下这个 f 也可以，然后我们就来带大家去封装一下这个原声啊耐克斯吧，然后我们可以通过 export const 这个 xo， 他是一个对象啊，然后我们请求这个数据使用 get 请求就好了。 ok， 然后我们会接收一个 usl， 他是一个真类型，然后呢他还可以接收一个范型，然后呢我们来通过这个 promise 给他包装一下哈，就是你有一个 pro miss 这个，然后 pro miss 呢？还有两个回调，然后一个是这个 resort 和一个 rejects， 那瑞金的话我们就先不写了，然后我们就直接用这个瑞造就好了，然后呢我们再封装这个原声阿卡克斯，我们来一个 constantxhr， 就等于你有一个叉 mlhttp request， 然后通过 xhr 点 open 呃，去第一个是这个请求的方式，是一个 get 请求，然后第二个的话就是这个 u r l 请求的一个地址，然后他还提供一个方法，通过 xxr 点 on reidsc 的称职， 那这个毁掉里边呢？他就是根据那些状态去做一个判断的，那比如说这个 release state， 就是通过 x h 昂点 release state 等于等于一个四， 呃，他是一共有五个状态，零一二三四，那最后一个就是这个完成了，还有是这个 xhr 点 stouse 啊，不是这个 啊，这个等于二百，说明我们这个数据呢，返回是一个正常的，然后我们就可以读到这个接生里面这个信息了啊，他返回的是一个，他返回的是一个文本类型，我们需要通过接生点 pass 把他转换成这个接生对象， 对，因为他返回的文字我们是没有办法用的，然后他返回的是 response tax 的，然后如果那么有传送的信息呢？可以通过送的去给这个后台去发送一些东西，由于我们请求这个接送文件没有任何东西可以发，所以说直接传一个闹就好了。 ok， 然后我们再做一下这个延迟吧，通过三胎帽子给大家模拟一下这个 e， 不然请求太快看不出来这个效果了。然后这的话我们变成两秒钟，然后再通过这个 zoe 做一个返回就好了。 ok， 也是非常简单啊啊，大家如果不会去不会写这个原声，阿贾克斯的话可以写 一个一个 xo 也是可以的。通过 npm miss 到去装一个 xo 去引路一下，其实是一样的，然后我们返回的是一个 pro miss， 然后他的发型就是我们这个 t。 ok， 然后我们这个 xo 呢就已经封装完成了，封装完成之后，我们在这个 sitterview 来给他引路一下， 就是艾特下面的这个 solar， 然后下面的这个 exo， 然后这是他是一个对象，也是一个 x， 那如何把这个组建变成一个亿，不组建我们可以使用这个语法里面新增的这个顶层 ov 的技术，就是直接可以使用 ov 的， 这个东西一般不是配合这个声音可使用吗？在 es 七之后呢，是可以直接使用这个底层 lv 的技术，它下面所有的代码都会变成一个异步的， 然后我们就通过 excel 点 get， 然后去访问一下点杠这个 data detect， ok， 然后这儿的话可以接受一个范形，我们刚才定义了，然后这个范形我们可以定一个樱桃儿 face， 就是一个 det， 然后他会返回一个 get 对象，我们再来看一下这个 jcs d 的对象，有内 aa 制、 u i l， 还有这个 dsc， ok， 就是一个得的对象，然后 name 呢？它是一个 string， a 制是个 number， 还有一个 uyl 也是一个 string， 还有一个 dsc 也是一个 string， ok， 然后把这个发型传给这个盖子里面就好了，然后接收一下这个纸啊，它里面会多一层这个 data， 然后我们直接给它解构出来吧，对方便一点啊， 这的话就是这个 data， 然后把这个数据呢给它展示到这个页面上，然后这个头像冒号 src 就等于这个 data， 这是 url， ok， 然后这个的话我们放一下这个名字，就是 data 点内，然后下面的话我们就放一个年龄，这就是 a 制，然后最后最下面这个放一个得他点 dsc， 也就是这个描述， ok， 那么这个数据呢？就已经填充上了，那这个组建呢？他就会做成这个义务组建，因为我们使用了这个 顶层额为他技术，然后我们在这个 app 者 vivo 呢，就把这个组建给他引路一下，然后我们叫什么 const， 也叫 singkwheel 吧。啊？引路的时候一定要使用这个 define 和 singhcompotent 的，是用这个函数去做一个引路，因为它是一个易部组件。那这个函数呢？他有两种 书写风格，我们先来展示第一种，第一种的话就是直接传一个回掉函数，就是一个箭头函数，然后呢通过箭头函数再使用这个引炮的函数模式，注意是引炮的函数模式，不是上面这种。上面这种引 potfrom 形式呢，只能写在最顶层。这个引炮的函数模式呢是可以写在代码逻辑里边的。 然后我们再请求一下这个路径啊，就是这个 compotents， 然后下面的这个 sinke dev。 啊，这个就是一个意步组建，然后怎么把这个组建去给他展示出来了？注意要展示意步组建必须使用这个撒次判死， 就是我们这个 v 三新增的这个类似主劲撒子判死，然后撒子判死，他会提供两个叉槽，那个弹力弹破力，对，他会有 两个叉烧，我们再把这个摊牌再粘一个，那第一个叉烧就是一个 defaut， defaut 是什么？就是我们要就是这个展示的这个组建，就是这个 sink 点 view。 那第二个叉烧是干什么？是一个非要贝壳，那非要贝壳他是干什么？就是比如说我们刚才延迟两秒钟， 对，我们延迟两秒钟，就是在加载的时候，你可以在这个非要贝壳里面去做点什么，我们就可以把骨架屏给它放进去，显示一个加载的一个效果，哎，非常好，就是这个 scalent 点儿 view， 那给它塞进去就好了，那这个组件我们不是一步登，所以说我们就可以使用这种方式去做一个引入。 ok， 那我们再来看一下这个页面效果，哎，发现我们这个股价平呢就已经展示出来了，两秒钟之后呢，选择我们这个真实数据，那这个的话就是一个一 部组建的一个基本场景啊，我们再来看一下啊，一点问题都没有。 ok， 然后我们再来演示一下他的第二种书写风格，就是他呢可以接收一个对象，那这样子，然后他里面属性是非常多的，我记得有个 漏的 compulson 啊，这样子，还有一个什么 ilocompulson 的，就是加载失败的一个组件，还有什么 tamlot 超时时间。 不过这这个方式我们可能用的比较少一点，我们一般还是使用这个箭头函数直接去返回，这个总结用的比较多一点，所以说大家只要记住他有两种输液风格就可以了。 ok， 这样的话我们还是使用这种方式 好的，也是没有一点问题啊。然后我们再来演示一下这个代码分包，就是凡是通过这个引炮的函数模式所引入的东西，他都会做一个代。 先把拆解，我们先先注掉，我们先注掉，先看一下， 对，我们先住的我们先不移，然后我们先给他进行一次打包，我们先来看一下 这个会涉及到这个性能优化，面试的时候也是经常会问，我们先打包一下看看啊，通过 npm 装 b 的就可以了， 他会打出一个迪斯特包来，我们找一下啊，稍等一下，他应该还没打完。 ok， 他已经打完了，就是迪斯特包里边，那他默认呢会把所有东西都放到一个杰斯里边， 然后我们先把这个组件，我们可以把它变成这个同步的啊，我们再重新引入一下啊，就是这个新客 vivo 啊，注意我们现在是使用的这个同步方式，去给他做一个引入， 然后在页面上给他渲染一下啊。 ok， 然后呢我们再给他进行一次打包 来，发现他还是只有一个职业字，那如果这一个职业字比如说很大，那你打完包可能出来 五兆或者是十兆左右，那这也是首次加载的时候，那摆平的时间呢，就非常非常的长， 所以说这时候呢，我们可以使用这个异步逐渐去把那些没有用到的包呢先给他拆出来，就是比如说我们这个组件呢，可能在后面的页面中呢才会使用，我们就不要把它打到这个主包里面去了，我们就可以使用这种方式，我们再来使用这个异步阻键方式来给他演示一下， 然后我们就把上面这个给他解开啊。 ok， 然后我们再 来给他打个包，通过 npm 装 beauty。 哎，此时你就会发现发现这个信科威武这个 gs 呢已经被单独拆出来了，所以说他只会等用到这个 gs 的时候呢，才会去做一个加载，他就不会 都去放到这个主播里面了，所以说我们这个主播呢，他就会变得比较小，那手屏呢就加的的快一点，所以说可以使用异步组建技术去优化我们这个项目。 ok， 那以上的话就是所有的知识。

好的，我们一起来看一下二点七的这个题号，他所问的问题呢是 slot， 那 slot 呢就是插槽，那通常我们在面试的时候呢，面试官可能会问，你有没有用过插槽啊？那插槽有几种类型，你在什么样的情况下，什么样的场景下用过这插槽？ 那么到这呢，我先给大家讲一下，在义务上啊，就是说在什么情况下，在哪些义务上，我们可能会用到这个插槽，然后其次呢讲讲一下这个插槽的几种类型啊，然后呢在二点九也说，下节课的时候，我会给大家去具体的封装。好，那我们这呢先了解一下插槽哈，大家呢可以看一下我们这的一个场景啊， 那我打开一个页面，请大家记住这个页面啊，上面呢是有一段文字，下面呢有个温馨提示，然后这有个文文域，这有返回箭头和发布。好的，我现在呢再进入到另外一个页面，哎，这个页面呢也有发布，大家会发现这个页面和上个页面的区别在于说，呃，这呢是没有上边和下面这段文字的，对吧？那这样情况下呢，我们就会用到 插槽，什么意思呢？插槽呢就和类似于我们现实生活中那个呃，插排一样，我们可能会插一个充电器啊等等这样些内容，对吧？那啊，就是有一个页面，他这个页面呢提供了一些你可插入或或不插入的内容，你不插入呢就没有，你插入呢，他就存在那个温馨提示 啊，大概就这个意思。好，下面呢我们就来看一下插槽几种类型啊，来这呢我给大家写一下，插槽呢分为这么三大类，基本上第一种呢叫匿名插槽，这个匿名插槽呢顾名思义就是没有名字，那第二种呢？是啊，剧名插槽，说白就是有名字啊剧名， 然后第三类呢是作用欲啊插槽，这个作用插槽呢其实就是传直的啊，这个呢就是我这给大家标注一下啊，这个插槽啊没有名字，然后这个地方呢就是我们的插槽呢 有名字，这个呢就是啊传直啊给这个呃插槽给这个 timely 的传直啊，就这个意思。好，下面呢给大家演示一下，我这呢创建了两个页面，一个是 a， 一个是 b。 好，可以给大家看一下啊， 那我进入到这个页面呢，我希望他啊长的样子是有温馨提示的，那这个地方呢是没有温馨提示的，那我该怎么办啊？那我在 a 页面和 b 页面呢都共同引入一个组件，比如说呢我随便写一个吧，叫历史吧，无所谓啊。 啊，然后这样呢我们就呃这这是插槽啊，这个页面就是啊要写插槽的内容。好，那现在呢我就要在 a 和 b 呢都把这个呃插槽引进去，都把这个 list 引进去，这有一个 inpuls， 然后是我们的 list pro 啊，点杠 list asport。 好，我们引入这个例词就可以了。 ok， 这也一样。好，现在 大家可以看一下我点击哪一个呢都会进入到共同一个组件，对吧？好的，那我这呢就呃给他弄一个这样东西，我说这有一个返回箭头，好，随便写了啊返回箭头啊， 然后呢还有一个是发布发布按钮啊，然后下面的文文玉什么的，我就随便写个引扑去吧啊，我就不写那么多了啊，大家知道这个意思就可以了啊，然后呢，我在下面呢有一个温馨提示，这个温馨提示，温馨啊， 这个温馨提示呢，不是在这写的，如果你要在这写的话呢，你看你进入到哪一个这个组件里边，他都会生效的，所以这个温馨提示呢，我就不应该在这写，我要给他留一个 slot 啊，就是一个位置啊，这是 slot 一个位置， 那么这个位置呢，就是说你可插入的，那么现在呢，我如果在这个 a 和 b 的这个两个页面中，我没有进行插入，那它就不会存在， 大家可以看一下，那当然如果说我要写的话，我要在这个类似于标签，对吧？就是这个组件等里边去写，我说啊，有啊，比如说我这么写吧，温喜 diy 啊，然后这呢给他来一个 style 吧，随便写一个，然后这有一个 style， 然后这有 color 为一个 red， 然后这呢是温馨提示， 那么现在的话呢，就是我们的这个页面就有温馨提示，而这个页面呢就没有啊，这就是我们所说的插槽，你看它就是一对一的关系，这个 slot 呢就对应这个 diy 节点了啊，就对应这个说白这里边内容了 啊，那当然，刚才我们看到那个例子里边是上面有段文字，对吧？下面有个温馨提示，那我下面呢想来一段文字，比如说我来一段文字啊，我说啊，这是文字内容啊，叉叉，那么这段文字我现在呢想给他展示出来那，但是呢，我不想放到这个位置上，我想放到这个引扑特的 这个上边，对吧？问题是放到下边，现在显然你是不可以的啊，为什么不可以呢？刚才我们说一对一的关系吗？哎，你看啊，那这个 slot 它代表刚才所说的代表他吗？对不对？好，那我现在这个 slot 再放到这，那不就可以了吗？不是， 它其实这个 slot 呢，代表的是这个里边的所有整体啊，你要给它去区分，就这个 slot， 我希望代表的是这个 d i v， 这个 slot 呢，我希望代表是这个 d i v。 那么此时此刻该怎么办呢？啊？你就要写 这个具体的名字了啊，具体的名字了，就是有名字的插槽，那我们这呢，可以给他起名字啊，好，我们在这呢给他起个名字，比如说啊，起个 name， 这个叫我随便写一个吧，比如说叫哈特吧，哈，然后这个地方呢，我给他起个名字，比如说我叫他福特。 好，到这呢，你要把这俩分开，我这写个 tablet 啊，分开，然后这呢，我要写一下它的一个这个，呃，名字我们可以这么去写 啊，当然这是一种简写形式啊，我们写个 hunter 啊，把这个呢放进去，然后这儿呢，我再写一个 time later 啊，我写一个 footer。 好，这个时候呢，大家来看我们的页面，是不是这个文字和这个文字就过来了啊？当然这个 a e a 的一个路由，看是不是有这个温馨提示和上面文字呀，那我这个页面呢，他就啥也没有， 因为你没有往里边去插入内容，对不对？哎，你没有去插入，但你要插入呢，你就要写 tom later 啊，当然我们 tom later 呢，就要有个名啊，那你比如说你写个一二三，他是不会插入进去的， 因为呢他不匹配这个名称啊，所以说呢我们这写一个，比如说，哎，看这，我插入一段 y 随便写，你看这个 y 呢就插入进来，好，就是这个意思，这是我们这所说的啊，关于这的一个句名和匿名插槽，匿名就是没有名字，句名呢就是有名字， 那么这种情况他通常在什么时候啊进行一个使用呢啊？就是插槽更多的地方呢，其实不是在业务上，是在我们封装这个组件啊或者插件的时候， 所以说呢在这个二点九的时候啊，我会给大家详细去讲一下，那我在这呢可以给大家去看一些实力，包括大家可能用过这个 alims ui， 我随便呢给大家去找一个啊， 好，那我们通常在 animate ui 里边呢，是能看到很多类似于插槽的它这种写法的。好，我们随便去看一个就可以了。嗯，稍等啊，好，我们找一下它的一个组件就 ok 了， a 二 v u 三，这个本身无所谓， 我看一下它这有没有啊，你不认得哎，我怎么进不来啊，看一下有没有啊，稍等。呃，大家可以看一下子，它这种呢就是插头的写法，你看它外面呢是有个 e l 杠呃， phone 这么一个组件，然后里边呢又套了一个，那说白了里边这个呢就是个插槽啊。啊，那很多地方呢都会用到这个插槽的啊，我们来看一下啊， 你看这它这呢是有一个什么 group 对吧？ group 里边这些东西都属于插槽啊，所以说插槽呢是在一些组建封装里边无处不在的，基本上啊 封装类型呢用的比较多啊，这个封装呢？基层封装呢？我在二点九也是下节课呢，回家去讲。好吧，然后咱们再来去聊一下这个作用作用欲插槽作用欲插槽呢？其实就传直的啊，那比如说吧，举个例子啊，大家看啊，那我这呢？呃，有直，我想给他传过去啊，比如 我定一个值哈 sport， 我随便定一个哈，比如说我要定一个，呃， a r 输组吧哈，里边有 a 有 b 有 c。 好， 然后现在呢，我就想，呃，在这个温馨提示下边吧，把这个 a b c 呢给我循环出来。那请问你定义这个东西是在这个插槽就是在这 list 里边这个组件里边定义的，那我想要给这个 foot 传过去，对不对？因为温馨提示嘛， 那所以说我要怎么去传呢？哎，你这样呢，就和副传子那种情况一样啊，单向绑定过去 a r a r 这样就可以了啊，传非常简单，那他怎么接呢啊，这样呢，要等于一个 a r 就可以了 啊，那如果你传多个呢，他就逗号啊，当然不能这么写啊，得这么写啊，逗号隔开，比如说再传 s t r 或者接受 s t r 就可以了。 那这个地方呢，它其实是做了个结构，如果说我不加那个，呃对象啊，我们看下 a r 哈，它其实呢返回是对象，然后包了一个 a r， 看到了吗？对吧？你你这时候要用 a r 的话，你的 a r 点 a r 才能拿到 a b c 啊，所以说呢，我们基本上会结构一下，然后到这呢，我们直接用 a r 就可以了，那我们这儿呢是可以循环的，按来个 d i v， 这儿来一个 v 杠 four， 我把这呢循环一下，印一下 a r。 好，大家看 a b c 呢？循环出来啊，这就是作用叉槽，说白了就是可以传直，我们这可以去使用。好，大概呢就这个意思。 行，那么有关于呃插槽内容呢？基础部分我给大家讲到这啊，分别为匿名插槽、聚名插槽，作用于插槽 啊，那在什么样场景下呢，也给大家说清楚了，大家呢需要去练习一下，如果说第一次了解插槽的话啊，然后呢在下一课呢，我给大家去讲一下如何封装这个组件，或者封装一个插件，我们怎么样去用插槽哈，行，那关于插槽内容呢，先给大家讲到这哈。

我们在使用 vivo 三定义响应式数据的时候，要使用这个 rife， 然后在用这个数据的时候呢，要写上点 w， 这个方式比较麻烦，我教给大家一种简单的方法，我们反问 vivo 三的官方文档，然后拖到最下边，这块有个响应式语法堂，先点击显示启用， 然后呢把这个包用 npm 或者压下来装一下，装完之后的话呢，在你的 witch 文件当中进行配置，那我在这里边已经配置完了，如果你使用的是 ts 的话呢，那需要对 ts 进行配置，我们靠配这段代码放到我们的生命文件当中。好，我把这段代码已经复制过来了， 现在我们就可以正常使用了。我们这时候呢，在这块就可以给他换成倒轮，具体的详细使用大家可以看文档，那我们就可以不用使用这个歪流了，但是你要注意这块的话呢，如果你有负值操作，那这个变量你要改，把它改成 let， 比如说这块你要负值，是吧？一定要这么写。那么如果对， 可以看一下我录制的 gs 的系统课程讲的很全面，现在我们在使用 propos 的时候也会变得非常方便，我们可以直接设置默认值，而不需要使用 which default 了。呃，当然我们也可以对这个变量进行改名，是吧？给它改成 a b c， 你可以进行别名的定义，不过呢，这是试验特性。说一下，在这块儿会有提示，大概意思就是说这个功能是试验阶段， 以后有可能会进行更改，所以建议你明确的指定你的版本号。那大家看这个项目呢，就是晚上咱直播讲的雷若加 vivo 的系统平台项目里边的话呢，我就使用了这个最新的特性，写起来的话呢，确实是省事。

怎么样基于开源的组建库进行二次封装和开发？以 ana mateui 组建库为例，带大家手把手的去实现一个第一步，首先要把咱们的项目搭建起来，怎么样搭建？就是按照咱们的 mate 的官网去创建咱们的 vivo 的项目就可以了，我们需要安装 ana mateuaida 的依赖，安装完之后，那么咱们在 mate gs 里面你是不是需要引引入， 你用完了之后再看。咱们上目录不是非常常见的，既然咱们要开发，那么咱们所有的主见是不是要放在这个文件加下这个文件加下我建了一个 comy， 那就以什么 ipui 主间库的这个进度条这个主见咱们进行二次开发，这个是他的官网的一个说明，这个是他的一些属性。那么首先我要创建我们的目录，对吧？在这个 组建这个目录下，那么我创建了一个敲门文件夹，这个里面比如说我要开发这个记录条的这个组建，那么我首先要创建记录条的文件，创建完文件之后，咱们所有的模式在这个文件夹下首先要创建影带，是 是这个文件啊，然后再创建爱莎丝文件夹，这个文件夹里面我要放我自己要封装的领带的点，没有一文件，这个里面主要是放的什么？是真正的我要进行二十开发的这个代码啊，这个是 ui 的主线裤，这个文件夹下还有一个入口文件引带的 ts。 开发好了，这个组件我要进行注册啊，注册就是这个是组件的名字， 对吧？这个是真正的他的业务，那么这个东西是怎么来的啊？就是咱们上官网去看一下就可以了，你做一下，比如说逐渐的注册啊，那么这是不是逐渐的注册 这个东西我是怎么知道的？上官网搜的，所以说咱们遇到问题一定要先想到官网，从官网上去找， 下一步就是在这个入口文件里面，对吧？我要去注册我的这个组件，定了我的自己的名字，然后在这个敲门的演讲下，我还创建了一个引带的 ts 安装，因为我要挂在这全局下，这个全局啊，这个是我的这个组建全局他，然后我去右右，他就 就是以插件的方方式进行使用，插件的方式进行进行使用，那么这个地方就相当于注册插件了，这地方也可以收怎么样用，对吧？就是这种方式以插件的方式进行使用，这也是他挂网的啊，然后在这个地方这个目录下是我所有的主见，对吧？然后我需要在全局没点 gs 里面 去去用，那就是在他下面指定主见的地方，在这地方用一下就行了。那么如果我要再添加其他主见，我就在这个输入里面加引过来这个主见就可以了，他自动的给我注册，在劝你用就可以用，咱们怎么样进行二十分钟吗？在引贷的 vivo e 里面，那么首先我要引他吗？对吧？然后可以看一下他官网上这个有哪些属性 啊？有这么多属性，那么咱们进行二次开发，那咱们就选了其中一个百分比，还有是否有动画他的动画的执行时间啊？这个就是常规的一些业务逻辑，就默认的话就是放肆吗？如果是处的话，那么就按照动画组这个动画的执行时间，你传的这个时间太猛，对吧？那我怎么样 用呢？用我自己定的主线就可以了，那么他可以穿着这些尺码，这地方是我进行重写了，他的三个数线啊，还有一个，这个，对吧？这个他的类型，那类型其实就是在这个，也就说他的基础上也有这个东西啊。对，自定义也可以，用他的都可以，最重要的是掌握整个二次开发组建的一个流程， 第一步把项目搭建起来，第二步对吧？我要创建我的主见，我的目录结构要规划好，其他的两个主见也是一样的，来下期放我的这个主见，然后还有一个入户文件， 自定义我的主见名字。那爱人民的 ui 官网有这么多主见空，其实他们的视线套路就和长辈以上讲的其实是一模一样的，最重要的就是主见的注册和插件的注册，掌握了他整个的模式是不是不难？

来看一个组建风装，来看一下效果，就是这样的一个弹窗，现在组建库这么多，还有必要自己去封装吗？这不就是业界的 message， 其实有必要，因为每个团队都有自己的 ui 规范，你也有自己的盗墓结构，也有自己的一些需要在盗墓上绑定的不同的数据，比如说点位啊这种，如果你只是做一个后台的话，那你当然无所谓，对吧？ 我们来看一下，那这个组件吊用，效果上看起来很简单，但是这个组件的使用方式不太一样，它是通过一种函数的方式去使用的，而并不是说我们要先把组件进行一个发入。那我们来看一下代码，这里我们直接引一下 ute 这个文件，然后从里面结构出买水。这个东西看起来是个方法，它里边实际上是一个组件， 我们点进去看一下，那这就是导出的这个 mac， 你看这是一个函数，然后在这个里边进行了一个时间管理，这个函数里边去引用了一个 mac 的组件，就是我们最终在页面当中看到的效果，这里边只是一个 展示层而已。那其实这个组建的封装重点就在于这里，我们把这个组建使用 vivo 单独进行渲染，渲染完之后呢，把它单独挂在到一个节点上。我们来看一下盗墓结构，看这里有两个，一个是写业务的， 一个是弹窗的，有弹窗的时候就放在这里。那我这个效果是直接用 vo 三去写的，这个里边直接传纯文本也可以，也可以传 v no 的，就是那个 h 创建出来的 no 的节点，这个你有需要的话你就自己去改一下就行，好吧？就到这。

好，这节课呢，我们就来完成课程页的最后的这个条件筛选，这呢有综合最新课程最多购买以及价格。那首先呢，我们先来解决一个事情啊，就这个价格呢，它其实有一个上下箭头的在这呢，我们并没有啊，所以说呢，我需要先把这块先给它弄出来啊，行，那这样吧，我先把上节课这个笔记先翻过来哈，这呢有一个十六忘记，忘了，咱把这十六翻过来这个链接，然后那个十七的话是我们这节课内容啊， 不管是卸会选择老是弄好了，下面呢我们就先去调整他的一个上下线头这块，那调整他呢，我们就要打开这个地方的一个 cos 点没有是吧？然后我们找那个价格，找到这个价格， ok， 行，那这个价格呢？目前他这用的是 i， 对吧？用的是两个图标啊，那只不过我们这没有，咱们用的是按的这里边的啊，那这呢是有一个上下头的，我把拿过来这个上箭头，有一个包头，是一个下箭头，是吧？然后呢我们在下面需要给他做一个引入 啊，在介词部分引炮的这俩东西啊，那我们记得在之前那个公众的这个头，我们之前是引炮的过的啊，就这个地方啊，所以说呢，我们下边 gs 时候就引炮啊，然后把这两个呢都放到这，注意啊，一定是驼峰的，然后并且呢首字母一定要大写啊，千万记得啊，然后这呢就是一个包厢名 d o p t o m， ok， 把它们放到我们的 gs 部分。 好，那这样的话呢，这两个小图标呢，他就发出来了，这是我们的一个呃，字体图标。好，那下面呢，我们看一下我们的一个页面，好，在这呢就有这两个小箭头了。 ok， 行，下一步呢，我们就开始做这块的一个点击操作，点击综合，然后最新课程最多购买以及这个价格，是吧？好，那我们现在呢就跑到上面，哎，这块代码我往前调整一下， 好，跑到这行，那说白了就是你要点每一个，就要给每一个加实践，对不对？他们有不同的实验条件吗？好了，下面呢我就整体的加一下啊。来，我找到我已经写好的电话，然后给大家复制粘贴过去。呃，这有一个，哎，这地方的一个综合啊，这是一个实践。 好，这是综合的，然后再来，这是最新课程的最新课程。好，再来这呢有一个最多购买，每一个呢都是一个。呃，单独的 delete 啊，再往下有一个我们的价格，那也是这个 i 啊，也是 l i 啊， l i。 好，一二三四，没毛病，是吧？分别为来晚写写啊，这个和这个，以及它和这个啊。来，我们在下面呢写这个四个方法往下走。 首先呢是综合，那一旦制造页面啊，默认就是综合啊。然后其次是最多购买还是最新课程看一下啊？最新课程，然后再往下是最多购买和价格，复制一下最多购买和价格。 ok， 那就一项项的拿过来。好，我们写一下 cons。 好，下面都是一样的， ok， 加上。好，那不管点哪一个，呃，不管点哪一个，那么上来呢，他们都有一个这样的 class la， 对不对？比如说我点击了综合，或者说点击了价格也好，最多购买也好，他们都有一个 class lay， 那在这儿呢，我们就不用 class， 直接用 cell 吧，那我会定一个值啊，比如说我在最上边啊， 审美周期上面啊，或者说，呃，干脆直接在这。就是啊，价格啊，不应该，价格是综合最新课程这个最多购买和价格的一个 class， tension class 的一个样式。好，那我让他默认是一啊，默认 一，原理是说呢，一旦进入到我们页面综合，如果就是他，如果综合这块，他等于一，这个值，他等于一，那我给他加一个 s 类，对不对？或者说加一个 style 就行了。好，那到这我们就加个 style 吧。好，如果说他等于了一，那我们就应该给他加一个，否则就是空的。哎，过了啊，那这个颜色值呢？我就给他拿过来啊。 好，那这时候呢，我们来看一下吧，你看，一旦进入到这页面，我刷新一下，一旦进入到这页面，默认就综合嘛，对吧？好，然后呢，我点击他不断切换。那，那这节课程呢，我就让他是二至三至四和五嘛，所以说呢，我就可以把这个复制一下，然后到这啊，点击他就变成二啊，点击这个呢，就变成一个三，咱们先处理。呃，以上的三个是最简单的。 ok， 好，那我们往下走， 往下走，那如果说我点这个了啊，那么是不是让这个值，他的 v 六应该等于二，对不对？好，那点他的时候呢，肯定就是为一嘛，然后点这个呢，就为三就可以了。好，我拿这个一二三控制他，你看我点这个，点这个，点这个，对吧？他们就可以形成一个切换了。好，样式，切换一个问题了，下面呢，我们来做课程的一个筛选，那你不管怎么样，每一个都得调用一下这课程，对不对？调用下这课程好， 当然你可以把这个综合最多购买什么的挤到一个方法里边，但是呢那样的话呢就比较乱了，因为你还是要走判断的，所以说呢，单独的就每一个写一个方法啊，然后他们去筛选对应的课程，那么筛选课程呢？综合，那你刷新就是了啊，那最新课程是哪个字段呢？我们去看一下啊，找到我们这个呃项目里边，然后我们去找到对应的课程。稍等啊，咱们点击到这个 就这个 swift 的模图，然后再找下接口，然后咱看一下这个查询课程这块啊，然后它有一个啊这个类，然后我们找一下，呃，看看哪个最新课程啊？大家看这有购买的一个证序和道序啊，然后其次呢还有一个是时间排序，时间排序， 点击量排序好，也意思说是通过它来进切换的好，那这时候呢，我们就可以在最上边给他加一个这样的数据， 加一张数据，那如果说，呃这个数据因为我们要的是最新课程嘛，对不对？所以说它一定是等于那个最新的啊，然后我们把上面这个都给拿过来，这个是我们那个对象的 k， 是吧？那最新的是找一下啊时间的倒数 时间的证据啊，然后回到我们这个笔记里边啊，注意我们要的是最新的，而不要老的啊，也就是说他不用去做一个时间呃旧的和新的一个切换。好吧，那所以说我们这呢直接就去呃用一个就可以了，比如说这有一个呃 dsa， 对吧？咱用这个就可以了。好，来我们看一下啊，再自断一点。 呃，售价道序对吧？好，我们来看一下最新课程。那这个是最新的啊，可能说是今天发的，这是昨天的，是大后天的是吧。 e c a 就好了啊。综合，那综合是不是就应该没有这个筛选条件？有意思说我要让他呢为空啊，回到原来状态好点走，哎，回去。行，然后下面呢我们再来看最多购买，最多购买 那也是一个 d s c 啊，就这个子弹，我们看一下这个接口吧。呃，购买的证据，购买的道序啊，没问题。 好，哪些是购买最多的呢？这个好几呀？这好几百万人报名是吧？啊？当然有人就说了，哎。这有三百多的这有一百多的，那应该是三百多的钱啊。 这是后端去他后端的那个数据的问题啊，这和我们这显示没关系，可能后端呢是控制的某一个字段啊，那和这一个没有关系啊。怎么怎么理解这个事情呢？就是说，呃，他可能这个报名其实不是一个实际购买，就预览了，或者怎么着，所以说我们不用管这个。好吧，这是后端他们的产品问题，我们只要根据字段能把他呢对应的伸展出来就可以了，你可以看到明显的这是我们已经伸展后的， 你可以综合和增加购买，你看这个数据是有差别的吧。然后下面我们再看价格啊，再看价格，价格呢？是，呃，明显有商业线条，就是有高和低，就是正序和这个道序，说白了就是降序和升序，对不对？正序和降序这么一个排序。所以说呢我们要分辨出来啊，分辨出来，那怎么分辨呢？因为我们上面有一个这样的数据，他不是一二三四吗？啊？一二三吗？我们可以弄个四和五啊，所以说呢，在上边我们也是一样判断。呃，我们找到这个价格啊，好，把这个拿下来， 你看这个价格这两个字，它是不是需要有样式？你不管是升价格，升去降去，它都要有样式吧，对吧？好，然后呢，其次就是这个要加，这个要加。好，那我们就让它等于四和五就可以了。那上面这个呢？上面这个等于四，或者说它等于五是不是都亮了？哎，没错，好， 如果你现在肯定是不亮的啊，他不会这样的样式。好，那我们就到下边再做判断。那我们可以做什么样判断呢？如果说这家伙的白酒他等于四啊，等于四于他不为一个空，那当然你的不为空。哎，我们看看啊，我因为是刚才挡这非等于五就可以了，如果说你要判断空的话，那么一二三他也不亮，对不对？这还要判断一个不等于五 非等于五，那这个时候，好，我们来看一下，我点一下，哎，等会啊，我让它进行切换，那我就让它变为一个五， 是吧？然后这 air 四 if， 否则就是一个四，那这判断就是如果他等于五，好，这样就搞定了。来看啊，点击价格，哎，刷新一下 aj， 哎，怎么这儿呢？没有，如果它等于四或或啊， 好，你看是吧？这两件就可以了。那下面呢，我们就是无非判断一下他们的升序以及降序嘛。好，不管是升价格，升序和降序，我们都需要去请求这个课程接口。 好，那这块的一个功能就写完了，我们来看一下，搁这啊点一下走，哎，走，那就说了。哎，况且价格不对呀， 不管升去降去，这四百多，这这一分钱，这就是我，这不对啊，啊，还是还是一样的，是后端录入的问题啊，因为这些数据其实这个后端系统有很多学生在在做啊，所以说里边很多的数据可能不对 啊。就是，呃，我们有一个正常的售售卖价格和一个优惠价格，所以说呢，他显示不对，是一个数据上的问题啊，不是我们做的功能上的问题啊。行，那有关于我们的课程页的一个条件筛选，基本就全部搞定了。然后接下来呢，我们会做的内容呢，就是这个地方的一个登录啊，包括我们的一个课程的详情页啊和课程播放啊。 行，那么有关于这个课程页呢，我们就暂且说完了。好，那么这一课呢，我们就先说这么多。

今天给大家分享一下，在 v u 中对第三方主线库进行二次封装，这里我以 v u two five 这个日系选择器为例， 它的日期选择器大概就是左边这个样子啊，然后呢我期望做到的是放一个输入框，然后点击输入框，弹出一个日期选择器，选择日期之后呢，把它的值反映到这个输入框上面， 这怎么实现的呢？我们直接看代码吧，这里 我放了它的一个这个 menu， 就是说点击的时候可以弹出这个，这是这个日期旋转器作为它的 menu 弹出来。点击这个输入框的时候呢， 弹出这个日期选择器，然后当日期选择器改变值的时候呢，我们把这个值一密的出去啊，就是用了这个组件这个 model 属性的， 然后使用的时候呢，就很简单，就只要写一个 we got model， 传一个这个绑定过去，绑另一个值过去，然后这上面这个这几个值是写给那个这个输入框的输入框，这里 他这里一个 vban 的，这个多了 arches 呢，就是你看这里有个日系选择，还有他的这个样式啊，都是通过这个上面这个 这个组件传给他了，对，大概就是这个样子。