vue中antdv如何处理

打开阿里巴巴史亮图标网站，进行首页图标的搜索，选择符合自己预期的图标，添加到本地库，查看已添加到本地库的图标，点击下载代码按钮，下载史量图标到本地，这是解压后的文件。 拷贝图标样式文件到项目工程内，项目引入对应的样式文件和 grpas 对口文件， 鼠标的最终效果。谢谢观看。

踩了奥迪战组件的 bug， 兄弟们，就是这个自动完成组件，只要与完美域组件搭配使用的话就会出现问题。假设你现在输入英文没什么问题，然后全选删掉，你输入中文， 然后你再继续输入，大家看出问题来了吗？无论你输入多长，新输入的中文都会把之前的给替换掉， 而且你用卧室也监听不到。然后我就去他的 github 官网，想着去 asses 里边看看有没有相同的问题，然后就在这搜索 o two， 嗯，可以看到确实有相关的几个问题，这个是我上个周提问的，然后作者说没有付现这个问题，让我提供个小 demo， 但是上个周我看有人提到了这个问题，并且修复了，然后我们点进去看，他说的这个问题跟我们遇到问题是 相同的，然后我们去看他是怎么修复的，他分别是在这两个组件下修改的。 ok， 那我们就来试试他这个方法到底行不行。那我们这次打算用 pat 的方法来打补丁，因为我们用的是 p m m， 所以说他 p m m 自带这个 pat 就不用单独下载了 啊，使用用法就是 pmpm pitch， 然后这个报名 at 这个 version， 那我们来试一下，那到我们的项目当中，那我们根据命令 pmpm p a t c h 然后包名 aunt 杠 d s i g n 杠 view at 版本号， 四点一点二回车。 ok， 他给了一个地址，那我们 comment 点击一下，打开这个地址的文件，那打开这个文件之后，我们去 去看看他到底是哪两个文件。 components 下面的 input text error， 找到一下 input ok 这个文件，然后我们去找到他的这个方法，复制一下，点击搜索，那在这里对比一下，他是把这里改成了，并且那我们在这里也改成，并且 保存。 okay。 第二个文件 vc input， vc input， okay， vc input 在这边，然后 input 点 g s， 没错，然后我们也找到这个方法，看一看他这里哪有改动，也是在这里改成了，并且 我们也一样，并且 ok 保存，然后我们返回我们的项目文件，修改完之后执行这一段命令，复制一下 copy 回车。 ok， 我们执行完毕之后，可以发现这里生成了一个 pass 文件， 那这里就是我们打的补丁，可以看到我们删除了这一行，增加了这一行，然后删除这一行，增加这一行。 而且在拍 k 纸的接线里边，我们也可以看到这里增加了一个 pnpm 打补丁的一个操作。那接下来只需要我们重启一下项目， pnpm 第一位片欧底， ok， 我们在这里刷新一下，试试英文没有问题，哈哈哈， 啦啦啦。哎，可以了，正常操作现在就是没有问题了，那正常情况下我们这样就没有问题了，如果说你不放心的话，你可以去弄的 models 里面去找到 alt， 然后去找到 es， 然后找到咱们刚刚修改的这个文件，然后去这里面可以去找找，可以看到其实这个弄的 models 里面他也是已经进行了修改，所以说我们这个打补丁操作已经成功了，也就实现了我们这个 bug 修复。

大家好啊，我们来看这页面，一进来以后，这个筛选条件的部分就占了半平，其实呢大部分筛选条件默认情况下是用不上的，所以呢我打算给他加一个折叠的效果，我们默认只留第一排，剩下的后四排都隐藏掉，我们把这个按钮往上挪一下，好，开始 这是那两个按钮，我们把它挪到上面 好看一下，然后接下来我们把后面的四排放到一个容器里面， 我们参考他这个代码，这个是滚动效果的代码，是一个这个标签配合一个 div， 然后把里面内容放到这个 div 里。好，那我们开始把它复制过来就行了，把它都拿过来吧， 放，这里面放我们要放的内容，这改个名，你叫猫，肯定是。然后把下面的这些艾特姆放埋，艾特姆都拿过来，把他都折叠起来，找一下， 把它都拿过来，然后把它缩进调一下， 然后把这个下面条件加上， 放到杯坛里面，然后呢我们需要放一个按钮，我们就在这个放门外面放一个一二八乘，用来点击 切换展开和收缩的这块我们用文字类型的，不需要样式，然后加一个艾肯动态的， 然后我们找两个图标，一个是这个向下，向下放到后面，一是这个 收起，收起用这个，然后我们加一个点击时间，点击时间就是 好，我们看一下效果， 打开那然后我们再把这个按钮集中一下，设置一下样式，我给他加一颗 mcb 田，我们加一个宽度， 让他居中一下。啊，居中。然后呢我们再加个背景 悬停的背景颜色， 背景颜色我们找一个。 好，我们再来看一下， 错了再看，然后这个稍微有点大，我们把上下的拍顶去掉，左右去掉，好变小了， 然后他太靠下了，我们往上挪一挪， 然后我们把里面的这个小图标的颜色改一下， 我们再找一个颜色差不多用这个试试， 深一点，是这个。 好，这样就可以。好了，今天就到这里，谢谢大家，再见。

好，乔文，大家好，我们今天的话呢，讲一下关于这个万的点击 s 在 vio 三当中的一个用法。首先的话呢，我们是需要用一个调料架，有 v 六调价搭建出来一个项目，那这个项目呢，我就请大家好了。咱们在安装完项目之后，那使用万能的话呢，首先要引入这个插件，那引入的方法呢，你需要在我们的文件中打开命令行， 打开了之后往里面输入，比如说 install， 那叫做 went 就开始了。那这样一个写法的话，有的时候用的好，我们在说的时候可能还注意听不太清楚，我这里面专门整理了出来，你们可以参照这样一个文档来用法， 首先把这个内容进行一个复制就好，咱们这个文档的话呢，你按照它里面的这个内容一个个敲就可以啊，在目前当中输入 npmififenois 敲回车，稍微等待两分钟时间，他的这个内容就基本上可以安装完毕了，我们稍微等一下后来接下来再安装后第二个内容。第二个的话呢，是我们在按使用按虚假的方式进行使用， 还是同样的 ctrlv 敲回车？当然有的同学可能在使用这个 npm 的时候呢，会比较慢，那这个时候可以使用 cnpm， 这个的话呢，他使用操心下会更快一点点，稍微再等他两分 时间安装一下。等这个完全安装好之后呢，我们再来进入第三个步骤，在第三个过程当中，这里面需要进入我们的一个文件，这个文件呢，你通过我们的，不管是外机后的，还是你下边器打开咱这个目录，它里面的话都可以找到一个背部点， ctrl 点 gs， 如果找不着的话呢，你可以自己新建一个啊，在这里边你可以发现我已经把刚刚内容的这里面有过了啊，就是你在粘的时候要注意 好这个地方，如果你已经有了背包点， ctrl 点 gs， 那你直接粘里面的 plus 就行。如果你没有这个文件的话，你需要自己重新创建这个文件，然后把这个内容整体的给复制过去，这个布置操作一定要注意啊，写好之后，咱们接下来在相当中执行 ncm ren sir 来运行咱们的项目。 项目运行好之后呢，我接下来可以呢进入 loco host， 因为默认账号呢，都是八零八零啊，这个项目是重新创建的项目啊，它里面什么都没有，是原始的内容，就是一个横，一个 boss。 那接下来我想要使用万达的内容，我们可以呢进入到我在这个文档当中给大家也发了一个网址啊，你们看这个网址进来， 他这个用法呢，你需要别人里边说的是你就可以全局注册，也可以局部注册，对吧？那我们在用的当中呢，就使用局部注册方式，因为这个按勋引入码，局部注册用 inpot 八等方半的，以这个八等标签为例， 局部引入，比如说呢，我引入在这个叫做 homemade 点入当中 inpotteen broment， 接下来呢在他第二个需要找到 comenonces 组建当中使用这个叫做巴特点内幕冒号巴特，把这个组件注册到我们的 没有文件当中，注册完毕之后，用法呢很简单，你就需要在上方摊牌的里边随便找个位置就行了，比如说呢，写一个叫做 vangun， 在这里面稍微写一下，这是咱们的一个叫做万特按钮，写好之后保存，那么在英文中呢，我们来刷新一下，你就可以看到这个万特按钮，他跟我们普通的八次按钮是有区别的，比如说呢，我正常写一个小八次，这是一个小按钮，正常按钮两个呢，做一个三照做一个区别，可以发现我们的万次按钮， 他的样式会比我们的普通的巴达牛更加好看。并且呢在巴萨的用法或者说我们的办法的用法呢，在这里面都可以找啊，比如说我想使用巴达牛，它里边可以添加一些属性啊，或者添加一些我们常见的泰国属性或者其他的使用值，都可以呢，在我们的我们当中找到，比如说它里面有太伏主要按钮或者成功按钮，或者说有一个叫做警告或者危险都可以啊，我们来找一个叫做危险的灯点， 往这里边稍微复制一下保存，然后这个按钮呢他就已经成功了。这是我们今天给大家分享一个小内容。

同学们大家好，在本套课程里，我将会带领大家使用 view element admin 这款后台前端框架完成全线模块的制作， 其中权限模块涉及的 a p i 都是真实线上的 a p i 可供同学们在课程练习的时候进行调用。所有的 rest for a p i 地址在夏目源码 a p i 目录即可查看。 那在本套课程里，我会带领大家完成以下知识的学习。首先我会带领大家完成 view element admi 这款后台前端框架的一个安装， 那安装好后，我们面临的第一项工作就是实现后台的一个登录认证，那这里我会 带领大家完成基于 g w t 啊全称是 jason web token 的登录认证逻辑。那这里呢？我们先登录输入账号额的密，密码一二一二三，点击 logi。 那登录进来后，我们面临的第二项工作就是啊，或者说在登录的时候，我们面临的第二项工作就是根据用户的角色，那我当前登录的是这个管理员角色， 根据我这样的一个角色来实现左侧菜单的一个动态展示。 那这里我们主要跟同学们讲解如何根据用户角色渲染前端路由菜单，实现前端菜单的一个 动态显示。实际上这边的这个菜单的一个配置，我们就是在这个菜单管理里面进行配置，比如说我们的权限管理，我们点开， 在这里面我们可以去配置哪些角色可以看到啊？比如说用户管理，我们点击编辑，在这里面我们就可以去看一下这个菜单啊，哪些角色可以看到他， 我们就可以进行一个下拉选择啊，这个是学员添加的，我们系统里面会有一个初始化管理员，我们目前登录的这个账号啊，就是初始化管理员， 我们也可以选择啊这个角色，那这样子的话，如果某个用户被分配了这样一个角色的话，他也能够看到用户管， 那最终我们返回给前端的就是一个角色，前端呢根据这样一个角色实现左侧菜单的一个动态渲染。 那以上这两项任务呢，属于后台必须要完成的任务，我们可以理解为是宏观层面的任务，那完成这两项任务后，接下来我们会带领大家完成我们各个页面层的制作，比如说我们的用户管理 啊，我们的用户管理，我们在这边可以进行用户的一个添加啊，编辑删除 以及我们的这个权限管理啊，我们的这个角色管理， 我们可以指定这些角色啊，都拥有哪些这个权限。那实际上这个权限的话，这边呢，我们只是用了 elements ur 这样一个多选的一个组件，在具体分配权限的时候，我们还可以做成啊， 添加角色的时候就是进行角色添加，在分配角色的时候，我们可以来到另外一个页面，因为我们随着具体的一个后台系统的一个制作的话，里面的这样一个权限肯定是非常多的，我们可以按照模块来进行一个划分， 那最终我们可以在这边再加一个按钮，是点击分配权限，然后来到另外一个界面，我们在这个界面里面进行权限的一个分配啊，如果说我们的这个权 线比较少的情况下，我们是可以直接在这个下拉菜单里面进行权限的一个分配的。 那在带领大家完成这些页面的时候，我们会讲解到接口层的分装与调用，不同的页面，我们会讲解到 element ui 组件的使用，如弹出层的使用、塑形菜单的使用，如何实现分页以及多条件搜索。 那同学们有了这些页面制作的经验，那对于你工作中遇到的其他页面，相信也能得心应手。 正所谓授人以渔不如授人以渔，那完成上述工作后，基本上我们就完成了权限模块的制作了，但是对于系统里这个不同类型的错误提示，非常有必要 区别性对待，以提高用户的体验，也就是说我们应该根据不同的错误码进行针对性提示啊。我们举个例子，比如说对于某个接口的权限，我们并没有分配， 但是该接口所在的页面啊，用户是有权查看的。比如说我们的用户管理页面，我们现在是有这个权限查看的，之所以有这个权限，是因为我们在这个菜单管理里面，我们分配了当前的这样一个角色，是可以进行 这个用户管理的一个查看啊，也就是我们的这个初始化管理员这样一个角色是可以查看这样一个页面的，但是呢在用户管理里这个页面里面我们会去调用用户列表接口啊，那这边呢，我们来看一下， 我们试着把这个角色里面的这个用户列表啊，给他这个权限啊，给他删除，然后确定这个时候我们再到用户管理这边看一下。 哎，这个时候呢，我们就根据这种权限的一个缺失，我们做一个针对性的提示，并且呢这个错误提示呢，我们要求用户可以进行一个手动关闭，因为这个提示的话，相对而言需要一定的时间去阅读， 然后呢他可能还需要进行一个截图啊，所以说呢，我们留给用户手动关闭啊，他是一个警告提示，也就是说这样一个提示，他并不是一个致命性错误，只是呢一个警告 性错误啊，说该页面或者操作啊，目前呢是一个页面，那什么叫做操作呢？操作，有可能是啊，你不具备这样的权限，但是呢你可以点相应的一个按钮，那这个按钮一点下去之后，我们的后端呢 会进行一个拦截啊，知道你不具备这样的权限，但是因为某种原因，前端啊显示了这样一个按钮，或者说显示了这样一个操作的一个通道， 或者说用户他是通过这个 postman 啊，或者其他的工具直接进行一个接口请求的，我们在接口返回的时候还是会进行这样一句话的返回啊，所以说是页面或者操作，那当前呢就是我 的一个页面涉及到权限啊， slag， 这是我们权限的一个标识， user 点 index， 那 user 点 index 呢，就是我们这个用户列表的这样一个权限，但是你未获得此权限，可能会造成页面部分功能无法使用或者操作被终止，终止请联系管理员解决。 那这样的一个情况呢？通常啊不会发生，可能是管理员在分配权限的时候啊，遗漏了，比如说我们刚才的这样一个情况，那既然给你看这个用户列用户管理，那肯定会有这个用户列表相关权限的 啊，所以说我们在角色这边把这个权限给他再加回来，我们选择一下这个用户列表， 点击确定啊，这个时候我们再看一下这个用户管理，我们就能够看到这个用户列表了。 好，这个就是我们刚才说的啊，根据不同的错误进行一个针对性的提示，这个只是其中一种错误类型提示 啊。还比如说我们用户长时间为没有这个操作后台，那用户登录已经过期，我们的错误提示呢，就会引导用户重新进行一个登录。 好，那以上呢，就是我们这套课程的一个课程介绍。感谢同学们的收看，我们下节课再见。

哈喽，大家好，欢迎来到太阳热家。上节课呢，我们把那个 nvm 安装了一下啊，这节课我们安装一下 voe。 嗯，我建了一个 voe 的文件夹啊，然后在这在这地址栏直接输入 cmd， 就是在命令行里边 已经到指指到这个文件夹里边了，然后我们安装一下 ue 的脚手架，一车就行。 我习惯去是通过 项目去做 v o e 啊，不喜欢用那个通过引路的方式，那样只能做单页面，做不成一个项目。 然后大家对，如果对以前那个 html， 那如果还有什么问题，可以给我在粉丝群里面留言，然后有问题我再可以帮大家解决一下。 安装这个也跟网络有关系啊，因为他是从你看他访问的是一个网址，他从这个网址去下一些东西去，所以这跟网络还是有关系的。快慢 停一下，不知道为啥卡住了， 我看这还有吗？有我就不按了 啊，我们这目前有啊，以后我就不按这个了，反正命呢是这个。好吧，大家到时候可以按一下这个 命令，就是这个。好吧，如果不知道，到时候跟我说，我把命令发给你们。 这以后先这样把 voe 安上了，然后下节课呢，我们同我们去建一个项目去，然后让大家看一下 voe 它的 整体的一个架构是什么样的。好，那这一刻先这样，下一刻我们再见。

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

你今天咋回来这么晚？我等你看电视剧呢。我今天今天晚上学习，这会我今天干了一件大事，你知道吗？ 我之前就是把我们那个微友框架的原码，我看过一次啊，但时间久了就没多少印象了，所以我今天改变策略，就是我用那个叉慢的，就你们平常写册是用那个叉慢的吗？就是我我边看，你知道吧？然后我把它里面的主的逻辑 全部用那个叉慢的全部去理理出来。哎呀，结果今天早上去的早看了一会，晚上看了一会， 不知不觉我发现我看了好多了，然后我把所有的全部挤出来了，然后就是我把那个圆码代码一关，然后我现在看着我那张图，我就很快能够把整个圆码去回顾一遍，我觉得这样的加深的记忆， 并且你对他的理解会非常的帮助。我也把这种方式啊也推荐给大家，叫大家以后学习的时候一定就是用这种方式简单的把那个主的 主干给梳理出来，会让你加深记忆，并且以后能够快速的复习。

好了，这节课呢，来讲一下 mixing 啊，这个东西呢，翻译过来就是混入的一个意思，那下面呢，我们就来介绍一下 mixing 它是啥？以及它的一个使用场景啊，这样呢，方便大家日后在你的项目中呢去用到它，好吧， 首先呢，我们先来介绍一下他是什么啊？其实呢，在这个官方的文档中呢，说的特别详细了，他说 mixing 呢提供了一个非常灵活的方式，那前半句话呢，基本上属于废话了，是吧？嗯，重要来看这啊，他说这个 mixing 呢是来分发 view 组建中 可复用功能。好，那大家很理解可复用的这个内容对不对？可复用功能，这是他的一个 具体的一个功能，或者它是什么啊？是什么？来分发 vivo 组件中可复用功能。那下面呢，我就给大家介绍一下它的一个使用的场景，大家就更明白了，我打开这个 学习路线点自行版，然后这个网站呢有很多的收藏啊，比如我打开这博客，然后这呢有些文章，对吧？那我点击这样的一个收藏，哎，就把这文章收藏了，或者说呢，我点击到这个文章的内部，然后在这里边呢也有收藏，是吧，我就可以把它收藏到了。好， 然后呢这网站呢，除了文章的收藏，还有课程的收，这个收藏，还有这个简历的收藏啊，比如说我打开一个模板啊，参考简历， 好打开这，然后这呢也有一个收藏。如果说这样的项目，这个收藏我们要做的话啊，会怎么样去做呢？有很多的方式经实现，对吧？哎，比如说我这有个 a 组件 哎，然后有一个 b 组件，他们都有收藏，假如这是那个文章收藏啊，这是那个简历的一个收藏好，很简单，我可以 他单独写一套收藏功能，他呢单独写一套收藏功能，那就不复用就可以了，是吧？那当然我们要做到维护性各方面比较好的，或者说复用性比较强的，那我就 a 组件和 b 组件都要用到收藏功能不是，那我就封装一套， 然后把这个东西呢，让 a 组件和 b 组件或任何组件都可以用我这个收藏的功能，这不就是副用型吗？ 对吧？所以说呢，是把这个东西呢混到混到这些组件里边啊，这就是混入的一个大体的概念啊，这是 mix。 好，那在了解了他在使用的场景，那下面呢，我们就来看一看这东西到底该怎么去用啊？首先呢，我们打开这个副组件啊，是一个 home 点 view， 那基本上这一课我们不会 用到他，所以说把它关了啊，但是这里边呢引入了 a 和 b 这两个组件，下面呢，我就给大家写一下这个收藏功能吧，我就简单写写，好吧，那要用到 mixing 呢？我基本上或者说呢，在一些公司项目里边啊，会基本上呢创建一个这样的 mixing 一个目录 好，然后在这里边呢，我们新建一个 js 文件，就叫 mix 吧，改 js， ok， 然后呢，它有很多的写法，取决于我们外边怎么去写，比如说我这儿的 js 我可以通过 set up， 是吧？我也可以，哎， set up 我也通过，呃，这向下兼容形式就是 export 底方的这样的形式，对吧？所以说呢，我这都给大家演示演示，好吧，来回到我们这个 g s 文件里边呢，呃，然后我这样呢就给大家写全吧，我们可以引 port 一个 if， 然后 from， 这有个 view， ok， 然后 奥特，你看啊，这儿抛出去是一个函数 f u z t l n 啊，没错啊，这句话用的话呢，就和我们的那个组件里边儿用到，比如又是 这个 rooter 啊， from 啊，然后什么什么东西啊就不写了，然后下面呢，就是他加个括号，对吧？那我们要用到这个 mixing 的话呢，就 input， 然后这儿有一个，比如说 mixing 啊，然后 from， 然后找找到这个文件，是吧？然后他也加一括号，因为 part 不是个函数吗？ 就这意思。好，然后在这呢，我就随便定一些东西吧，比如先定义一个呃，数据值，它为一，呃，然后我再定义一个出 fox 进行切换， 上来是一个 force 啊，然后呢，我弄一个这样的方法啊，就是做点击的，当我点击它以后呢，执行某些东西，然后我可以让 这个 y 六值，比如说每次加等任何一个值吧，加等一或者加加都可以啊，然后再往下呢就是，呃，我需要把这个值给它改成一个处啊，然后过个两秒钟吧，过两秒钟我们再把它恢复到 force， 好，把这拿过来，然后最终呢把这个三个东西给它抛出去，就是 retail， 一个是 n u m， 一个是 f a v， 一个是 f a 八层是吧？ 好，那这就是我们写的可复用的功能啊，就在这，那么 a 组件或者 b 组件，某一个组件该怎么去用呢啊？首先第一步你得引入他啊，那我们就先用 set up 这种形式好， input exit from， 我们找下路径啊， 改点杠出去，然后是这个下面的接存键。 好，那么我引入进来以后呢，这儿，呃，我们就需要去写这种 set up 形式，比如说你可以直接在这 set up 啊，当然我说的这是我们用选是 a p i 的，对吧？那么在这呢，你可以直接用到它，好，我们可以把这个东西呢 ctrl 出来。 好，大家来看一眼啊， 啊，小心，大家看这里边是不是有很多的内容啊？对吧？比如说 f a v 呀， a o m 呀等等这样一些东西。那我这儿呢就可以把它结构出来啊，比如 light a m， 呃， f a v， 然后 f a 的 button 给它结构出来，哎，啊，结构出来以后呢，就可以直接在这用了，呃，比如我就用一下 a y m 吧，好，我们来看一眼啊，是吧？这个数字一出来了，对不对？ ok， 然后再用一个八三按钮，我说这是 a， 呃，我，我就要收藏吧，就要收藏，好，那我们看一下收藏，是吧？然后呢收藏这呢，你可以给他加上那个事件，立刻啊，就用它。 ok， 然后呢我们这呢就可以判断，判断什么呢？判断那个 f a v 就是收藏中， 哎，收藏中，然后这样呢就是收藏。好，那我们可以看下这状态刷新，当我点一下，哎，第二收藏中，过个两秒拍回去了，再点一下。 好，再点一下。 ok， 好，那这地方呢可以使用，对不对？那 b 组间呢？是同样的道理哈，来，我们到这呢就使用一下，也是一个 sata， 那这个代码的话呢，我就直接复制粘贴吧啊，然后把这也复制粘贴过去。 好，那我们看一下 p 组件刷新，点点点 点，大家看到有什么样问题没有？就是你会发现啊，他的数据不是共享的， 如果你要用到 v x 的话，它数据是不是共享的呀？这个四如果点一下这个变了，这个是不是跟着也变呀？没错，但是呢，这个 mix 它混入它不会的。好，所以说呢，这就是它所说的呃服用功能或者服用这样逻辑的 一个场景啊，是非常好用的啊。这是他的其中的一个写法啊，其中一个写法。好，那到这呢，我们就总结一下吧， set up 的写法吧。 那首先这个 mixing 文件，当然其实这个写法呢，还有一部分啊，这是 mixing 点 js 啊，然后下面是组件， 回头我不行就把呃对应的每节课的笔记整理到咱们文这个这个，呃网站的这个文档里边吧，就是这个 book 里边，方便以后我们看，就不用在课上去记录了， 直接在这看就可以了，这样的话大家链接也好弄是吧？行，那就往下继续喽。好，下面呢，我们再来看一下这种选项式 a p i 的 a p i 的写法，那我把这儿的 mixing 和 a b 组件呢都保存一下。 嗯，这 dista 是上节给我们打包过的，把它干掉，然后， 呃，我就从头来吧。好吧，那把这个给他扔到外边，先，一会我给大家整理那个笔记就好，这是 set up 写法。 好，把这些拿过去。呃，应该他们在 s r c 里边哈，我到时候再 给他去整理吧。行，先不浪费这个时间了。好，然后打开我们的这个里边内容，然后把 a 组件东西呢该清都清一清啊，然后 b 组件内容呢也该清都清一清了。好， 然后再打开我们这的这个地方的一个呃， mixing 呢，让我删了是吧？好，也是一样的啊，在这呢，我们还是需要创建一个呃， mixing 这样的一个文件啊，先创建一个目录， 新建一个 mix 点 p s。 好，然后这样写法呢，你就 as proto。 呃， const， 比如说 f a v 吧，等于，然后在这呢可以写成 deck 形式， 比如说 return 一个 a m， 它值为一啊，这就是很典型的选项，是 a p l， 对吧？好，然后这儿呢，我可以写一个。呃，我就随便写吧，就 f a v 的 button 啊，当然你也可以传纸啊，你可以传纸，比如说我可以接收一个三数都是可以的啊，那我们就接收一个吧，然后是 this a m 嗯，加等于这个纸啊，我就不做那个出 pose 切换了啊。然后，呃，现在我们要去用的话，这样写就 ok 了。现在我们要去用的话，就选的是 a p i 的一些写法 sport， 对吧？为什么要混入呢？就是你这里边不是可以写数据吗？然后这呢可以写 message， 对不对啊？甚至还可以写，就跟 vr 呀，写 watch 呀，写 computer 呀，对不对？都可以写。好，那我这儿先随便写一个吧，就是你好 好，然后这个混入什么意思呢？你可以混，混到这个组件里边啊，就是我可以这样 input， 然后这儿有一个，比如 f a v， 是吧？然后 prom， 然后找到这个路径，第二杠出去， 这 g s ok。 好，然后呢，你在这个地方就要把它横进来了， f a v。 好，这样的话就 ok 了啊，我们可以弄一个按钮试试啊。 呃，我把这个 a m 拿过来，然后这儿有 f a v。 好，咱们来试一试啊，咱们来试一试啊。当然我这个先把这个打开吧，然后这儿报了一个错误，我们看什么错？诶，这儿没错啊。哦，这儿我没有去传直是吧？我传一个五过去。 哦，我这个地方呢？呃，有点问题。我可以这么去写啊，我先把 这个，呃这个我我可以在 message 里边去写，或者说，呃这样吧，我我先把它删掉吧，我叫 f a v 的 b t n 吧。好吧，在这儿去写，然后这儿呢可以写一个 message 啊，然后有一个它，是吧？然后这里边呢可以打印一下 f a v。 我看一眼啊， 好，刷新。大家看啊，点一下是不是它里边有。呃这些东西啊，比如说 在这里边我们看一下这里边的东西啊。哎，这个 f a v 类似的 f a v 我看打印是什么，应该是没有的。 ok， 这个 f a v 应该是有东西的， 刷新一下。好，没错啊，他其其实确实有东西啊，就是 是我们有一个 data， 对吧？还有一个是 message okay， 好，到这呢其实我们就可以去使用了。呃我们要用的话呢，他得这么去做啊，你看啊，这 n y m 其实他已经展示出来了，看到了吧？啊，比如说我在这地方来个十 啊，它是 ok 的，然后我这个地方写的没错，然后我们看一下 f a v 用着它没错。 f a v 点儿这个数据，那我们要用的话，嗯，我应该。 哦这个叫 b f a v b t n 然后看一下啊，这个叫 f a b t n 那我们这样的话是可以直接使用的喽。 嗯，那我们看一下吧，先刷新 好，然后这呢是没有这个数据的。我看一下啊，这样吧，我先让他弹出一个一吧，就点一下直接这个一，好吧，这样应该是没问题。 好，那这个代码是可以直接出来的，对吧？ ok 了，好，那么我们这儿呢，把这 res 点 a o m 再打印一下吧，重新 好十也能打印出来，对不对？好，加等这个值，那也就没有问题了，是吧？只不过呢我这样呢需要去给他传过去一个值，比如传过一吧，那每次就加等一嘛。 好，哎，刚才为什么不行呢？好，那行，那这个呢就可以用了，是吧，我在 b 组件呢，也是一样道理啊，这是 b 组件，我们每次加一个二，好吧，小心 七十度十，它呢每次加一，这个呢每次加二啊，这是十七十六十七，这是二十四，每次 啊，也是可以复用这样功能的啊，我只告诉大家呢，就是选是 a p i 或者 set up 呢，都可以使用它，是吧，这个就是混入的意思，如果说我们是向下加绒这样选项是 a p i 呢，大家可以这么去写。 呃，不过呢你会发现他有他的好处，也有他的一些缺点。好处呢就是他附用了我们的功能，你像比如说 vivo x 的， 他呢数据啊，一个发生改变，比如说某一个组件用到了这个数据，另外一个组件也用到这个数据了，那如果说要把数据改了，是不是剩下都改了，而这个呢是不会的，对吧？啊，然后呢，但是呢，就是你比如说这个混入以后， a m 这个来源就比较难找了 把你你就是本身这个组件不会展示 aom， 所以说他比较难维护吧，这种形式如果说你要用 set up 形式呢就还好，因为他好维护的啊，这个是取决于大家的一些写法哈，所以 使用啊，不管怎么样我们都大体了解了这个混入它是来干嘛的就可以了，以及它的使用场景。好吧？行，那我把这儿的一个代码呢给它放到这儿啊，这是显然是 a p i 的，然后组建使用。 好。行，那有关于混入呢？我们就先说到这里。

好的，各位学习前端的小老板们，那这节课呢，要给大家分享的是有关于 view 中的混入的实际使用场景。那到这呢，先带领大家看一个案例，这是一个小程序的项目 啊，然后呢他的一个右上角，这呢我点击这个地方会出现的，其实正常来说会分享到好友和分享到朋友圈，那分享到好友和朋友圈这个功能怎么做呢？其实呢也比较简单，我只需要呢使用两个生命周期就可以做到了， 那么最上面这个生命周期呢，就是分享给好友的，这个生命周期呢就是分享到朋友圈的。好了，我们来看一下，先再点击，哎，这呢这两个也就点亮了，对吧，我这呢也可以选择分享到好友那块，但是呢大家来看啊，比如说我进入到另外一个页面，这个页面 他呢没有开启分享好友或朋友圈，那我要在 list 页面也需要用这样功能呢，我需要在 list 中也把这个什么油漆呢都给他开启了，好，我保存一下。好，那么现在呢，我们再来看这个 list 页面，我进入到 list 好，大家会发现这个页面呢也都开启了，我们的首页呢，刚才也是没有问题的，那么我现在呢带领大家想一个问题，如果我整个项目有一百个页面，那一百个页面都需要开启这样的这个分享好友和朋友圈，那我难道要添加一百个吗？ 啊，肯定不是，我弄一个全局的就可以了，那么但是呢，我弄一个全局，他又是一个生命周期，那我弄一个普通的 gs 文件，他是不具备什么周期的，那这样情况下呢，就犯难了，好， 所以这时候呢，我们的混入就派上用场了。好，那么下面呢为大家说一下这个混入哈，来，我在这呢稍微写一下， 首先呢，这个混入呢，它分为两种情况，一个是全局的 啊，一个呢是局部的，你可以这么去理解，那么我刚才所说的就是，我要在所有页面都开启这样的分享好友和朋友圈，是不是应该用全局的呀？啊，没错啊，一会也也会给大家演示这个局部的。 那这个混入什么意思呢？就是，就是我弄一个 g s 文件啊，这个 g s 文件呢，可以有任何的这种数据啊，方法呀，生命周期啊等等这样的内容。哎，然后呢，我 混在每个点 view 文件中啊，这些混入好是什么啊？啊？混入文件中可以写这个点 view 文件中 啊 script 标签的所有内容啊，但是它不可以写这个 timelit 哈，好，然后其次呢，它的一个作用 就是把内容混入到啊我们的点 view 文件中。 好了，那下面呢，我们就来去试一试，先做一个全局的，一般来说呢，我们在这都会新建一个目录啊，新建一个目录。 好，新建目录以后呢，我在这里边新建一个 g s 文件。好，然后这 呢咱们就加上这个地方的一个分享，我把这个呢整体的剪切过去，好保存，那我现在的 index 是没有的。好，然后我把这个地方的 list 也全部给他删掉，那这样话呢，是不是我的首页和我们的这个历史页面都没有混入呢？对吧？也就都没有这个分享什么好友朋友圈对不对？好，那么现在呢，我需要把这个混入的这个文件 有这个 g s 文件在，我全局做一个混入，那这个时候呢，我就需要到我的魅点 g s 中啊，这是我们的入口文件啊，全局混入引入啊。 好，那这样的话呢，就完成了刚才我所说的一些功能。好的，那我们来看一下。 好，注意，这是我们的首页，来点开你会发现，哎，发送到好友和这个这个朋友圈都没有问题了，进入到 list， 哎，也没问题了啊，这就是全局混入它的一个作用。好了，那下面呢，我给大家写一个 markdown 吧， 咱们把这个内容呢好好给他盘一下。 好，首先第一点混入，它分为全局和局部，然后混入是什么呢？混入文件中，可以写点 view 文件中 secret 标签的所有内容， 它作用就是把内容混入到点 view 文件中。好，那么下面的全局混入 好，我们就可以在 mate g s 中去引入。 好，那我们的混入文件 啊，就可以写任意你想写的东西了。哎，那有些小伙伴说了，我这写一个，比如说，呃， data 可不可以呢？是可以的啊， 比如说我这儿写个 a 冒号一啊，这是可以的，它也可以把这个 debt 中的 a 冒号一 混入到我们这个 index 点 vivo， 或者说 list 点 vivo 中啊，不相信呢，我们可以试一试，在这呢，我加一个 a。 好，我们进入到我们的页面， 大家会发现这就有一个意义了啊，那同样，我在 list 可不可以呢？也可以，但是呢，我想给大家分享一个混入的缺点， 各位，你觉得混入有什么缺点？那我先问各位一个问题啊，就你知道这个 a， 这个 index 点 view 中，这个 a 它来自于哪儿呢？ 反正不来自于我，本组件我找不到，对吧？那么他就来自于外边，那么至于是哪，我们就需要去找了。所以混入这个缺点呢，就是我们的维护性啊，因为本组件啊，找 不到该这个值或者方法或者审美周期啊，所以维护性较差。原因呢，就是混进来的啊，这个来源查找 比较费力啊，就是我不知道他是从哪来的啊？那懂的人，可能啊，是从混入来的，但是呢，呃，反正也是比较难找的，对吧？反正一眼看不出来啊。好，那我们再来说一下这个局部混入， 那局部混入是怎么个意思呢？啊？那就相当于说，我先把这个全局先给他干掉呗。全局干掉以后呢？现在啊，在我的这个里边，对吧？那页面中，他这个分享 是不是又不生效了？哎，那么现在呢，我想局部混入，包括我这一线也不生效了，好，那么现在我想在某一个点 view 文件中混入它，那就是局部混入，那它的写法是这样的，我们先把它引进来， 好，引进来以后，你在这个地方要把它加进去，那这样话呢，这个 a 它又就生效了，我们来试一下，你看，这 a 又就形成了，然后它的生命周期呢，可能也都生效了啊。当然，但是在例子的中它是不生效的，因为我们的例子中 也要引入这个混入啊，如果我们的例词也引入了，好，那它也就生效了啊。当然，我们所说的刚才这个地方 所呈现的一个场景是所有文件都要使用这样的分享好友和朋友圈，那我们这呢，就应该不采用这样的局部混入了，对吧？好，那么在这呢，我把这个地方的局部混入的写法也放过来， 那么大家再试想一下，我什么时候可能会用这样的局部混入呢 啊？比如说我举一个例子啊，嗯，我们做一个商城项目，它里边呢可能会涉及到有些数值，比如说幺零零后一后面跟四个零， 那这样是一万对不对？那我如果说想把商品的一万啊，别是邀 四个零，应该是一万，对吧？就是一万就完事了。那这种情况下我是不是应该封装一个方法来去做转化呀？但是这样方法他不见得说在很多页面会用到， 他可能就是在商品的价格那个地方会用到，那这时候我是不是用混入就可以解决这个问题啊？并且是局部混入的，哎，就这个意思。好，所以说有关于混入内容呢，就给大家介绍到这里。