00:00
哈喽,各位小伙伴们大家好,那接下来啊,咱们去完成home模块当中的相应的组件的业务。那首先说咱们呢,先完成三级联动组建的这个业务。那首先说啊,以后呢,在项目当中,如果看到某一个组件在很多模块当中啊都在使用,那你就把它注册为一个全局组件。而咱们的这个三级联动,不仅仅在home模块在使用,那以及search啊,Detail啊,他们这些模块都在使用。所以说啊,咱们呢,把它拆分为一个全局组件,全局组件的一个好处是什么呢?只需要注册一次,可以在项的任意地方使用。那所以说呢,咱们也做一下笔记,那么由于三级联动,它呢在home当中使用了。对吧,I home首页出现了,以及设置搜索模块出现了,以及详情模块都出现,所以说咱们的把把什么呀,把三级联动。
01:13
哎,注册为什么呢?就是注册为一个全局组件。那么好处是什么呢?只需要注册一次,那么就可以在项目任意的地方,任意的地方使用。那所以说咱们呢,得拆分这个组件了,而这个组件呢,是属于home模块的。那所以说啊,咱们呢,在home模块下再新建一些文件夹。对吧,那咱们呢,先看一下子已经完成的这个静态,咱们呢稍微看一下,那咱们呢先把没用的先给它关掉,咱们呢就找到相应的这个静态页面。
02:00
咱们看一下三级联动是属于哪里,是属于,这叫做商品分类导航。你看这不叫商品分类导航吗?就是这里比如说有什么全部商品分类啊,手机图书馆,咱们可以看一下人家的一个结构。对吧,你可以看一下子,比如说全部商品啊,服装城美妆城对吧,美妆馆那不就是这儿吗。对吧,那不就是这块的结构吗?那所以说啊,咱们的看一下给它拆分出来,你看人家这块的类名啊,叫做type nv,那咱们的这个组件三级联动组件呢,咱给它来一个文件夹,而且呢是作为home模块。那所以说咱们给它起个名字叫做type NAV对不?当然咱们得有这个组件,那咱给他拿过来。对吧,那这个呢,应该是pages下的home下的type nv,那咱们呢,给它来一个组件index.view。
03:03
那就是U,那这块呢,要注意咱们呢,给这个组件起个名字叫做type NAV对吧,那当然咱们得一点点来,那首先说结构你需要带走,那咱们呢给他带。那除了结构一定要注意,还有什么呢?相应的样式和图片资源这些呢?一个都不能缺。所以说这块呢,一定一定要注意,那咱们呢,来先找到顶上,先把它的这个结构先给它怎么呢折起来。那也就是说结构有了,你还得有什么有相应的样式,那样式呢,咱们采用的呢,还是less样式。咱们找一下子,那就是谁呢?就是这个叫做type nv。那咱们呢,给它带走,扔到咱们的项目当中,但是别忘记了它是less钥匙,所以说加上浪,为什么呀,为less。
04:02
那把它的样式啊,也给它扔进来,咱们呢,稍微格式化一下,稍微好看一些。对吧,那以及样式了,有了之后你要问问自己有没有图片。对吧,那大概看起来应该是没有图片对吧,因为这块都是文字嘛,对吧,这块的图片呢,是顶上这个hier,所以说应该是没有什么图片,对吧,那咱们呢,接下来要干什么,那接下来你就把它注册为一个全局组件。可以在项目的任意地方可以使用。那所以说回到咱们的入口文件,这是咱们第一次注册全局组件。对吧,这写下三级联动的组件。对吧,而且还要把它注册,为什么呀,注册为一个全局组建,哎,全局组件。那这里面呢,咱们呢,就可以引入一下importt,叫做type NAV from从哪引呢?应该是at盖pages下的,Home下的啊要注意大小写,Home呢应该是大写的。
05:09
下的谁呢?叫做type NAV。那咱们呢,把它注册为一个全局组件,那需要使用到v.compment这样的一个方法,对吧,点2COM。当然它的第一个参数是什么呢?第一个参数,第一个参数呢,是你这个全局组件的名字,全局组件的名字,那第二个参数呢,第二个参数就是哪一个组件。那所以说这里面咱们就可以写了,因为这是咱们引入的这个组件,组件呢,而且咱们还起了名字。对不,那所以说咱们可以这么写,叫做type NAV点那是可以获取到你组建的这个名字的,那不就是这个字符串叫做type nv吗?
06:02
那以及哪一个组件,那就是咱们的这个组件呢,叫做type NAV,那所以说咱们这样的一个全局组件就有了,那全局组件有了之后,那你需要注意,那需要回到咱们的home模块当中去使用一下。那咱们呢,去找到咱们的home组件,那在这里他呢,就需要使用到咱们的三级联动,哎,三级线下三级联动的这样的一个全局组件。当然这里要注意一下子,咱们在这里呢,就不需要再引入三级联动了,因为它已经是一个全局组件了,可以在这里直接使用。这里呢,一定一定要切记,它已经是全局组建了,不需要再引入了。对吧,写一下,比如说三级联动,那么已经注册为全局组件。所以说因此不需要再import引入了,你可以直接使用,叫做什么呢?叫做type NAV。
07:08
对不,那所以说咱们的写一下这个标签,那看一下子咱们的三级联动的这样的一个全局组件是不是就有了。对吧,当然这里要注意一下子,老师呢,现在展示的都是静态的东西。对吧,说白了没有跟服务器打任何交道,而且呢,鼠标仪上为什么有这样的一个效果呢,说白是样式。对吧,鼠标以上右侧该显示谁啊谁隐藏对吧?哎,所以说咱们完成了咱们三级联动这样的一个全局组建的业务。
我来说两句