039-尚硅谷-尚品汇-共用组件Carsouel

好了各位同学，那么咱们呢，刚刚啊，是把咱们的flower组件给它开发完毕了。那其实说白了呢，就是发请求啊，获取数据，展示数据而已，对吧。那接下来呢，有一个地儿啊，咱们呢需要呢去搞搞。就是谁呢，就这你看啊。老师问你啊，你发没发现一件事，什么事就是对于啊。这个list container组件当中的这个轮播图。对不，你看它是不是左右结构，是不是水平方向，而且是不是也有分液器，你看。底下flower当中的这个。这个轮模图是不是也是一样的结构？也是水平方向，而且呢，也有这几个，呃，小图。对不？那所以说啊，咱们以后遇见了这种在大量的啊，用同样的结构的东西，你可以给他怎么的封装为一个全局组件。

就跟咱当年的type NAV是一样的，你后在用，Search也在用，那我就给它封装为一个全局组件，那你看吧。现在对于这一块啊，就是这个轮播图而言。你会发现它的结构几乎就是一模一样的。对不，效果也是一模一样的。那所以说啊，咱们呢，把它拆分为一个全局组件。OK，不，而且全局组建呢，说白了，注册一次之后可以在任意地方，是不是重复的利用。对不，所以说啊，咱们接下来要做的一件事啊，老师呢，也做一下笔记。哎，这块咱也写一下子，那这是咱们接下来要做的另外一件事，就是第三件事。把谁呀，就是把首页，哎首页。当中的。轮播图拆分，哎，拆分。

拆分为一个共用的全局组件。所以说以后啊，咱见到这样的情况呢，你得有这种想法，你就看结构差不多，功能差不多，那你就给它封装成一个组件是共用的，对不？那你只需要注册一次，在任何地方都可以用，就这能不能理解？那当然，以后呢，咱们还会遇见这种情况，举个例子你看啊。就比如说在search下，你看啊，这是不是色。设置路由下是不是有一个分页器，你看嘛，走，咱们再往底下走走。你看老师呢，举个例子，就比如说你看这幺三七三四五六七八九十十一走123456，就举个例子，你看在别的地儿，哎呀妈呀，是不是输入错了，幺三七三四五六七八九十十一走密码123456走。

你看就举一个例子，就比如说咱的这个分页器，你看啊，在色置当中是不会用到，看这在色置当中是不会用到，那以及你看在别的地方也会用到，你要在我的订单当中你看嘛。所以说将来你也可以把这个分页器啊，也给它分成，也给它封装成一个全局组件。所以说以后你只要看到某一个组件在很多地方在咋在共用，你就把它封装为一个全局组件。OK吧，那所以说回到咱们这个组建当中啊，那咱们得封装一下。但是你封装这个轮波图组件，你要注意那最少的一件事，至少的一件事就是这个轮波图组件的结构。不管是结构还是GS，还是样式什么的，你至少得是一样的。这句话能理解吗？就是说如果说你想封装一个组件，那至少说将来这公用的组件，不管说是他们的这个结构样式还是行为，那务必是一样的，那当然现在他们是不是一样的，几乎是一样。

对，不但是啊，你要注意一件事，你看啊。你看咱们用到组件的地方呢，就这两个地方。一个是list container。对不，但是你要注意啊，你看咱不说顶上的结构，结构几乎都差不多，对不，你就看这。在list container当中，咱们的这个写法，你看这是不是用watch写？是不是在watch当中写的，你看这是不是在watch当中写的。对不，那你在看谁呢？你在看咱的flower，咱是不是直接放在mount当中。那也就是说现在这两个地儿的写法是不一样的，如果说这两个地儿的写法是一样的，你是完全可以拆分成一个组件共用。哎，这能不能走。能懂得给老师扣一个六，比如说你再回首看一下，用组间的地儿，它不就这俩吗？

一个是list container。对不？一个是flower，但是你会发现它的GS这一部分的写法完全是不一样的。那就说如果是一样的，那我是不是就给它拆分为一个共用组件，是不是大家都用就行了。所以说啊，咱们尽可能的让这两个组件写轮播图的地方，让他们的代码，让他咋的几乎是一模一样。对不，那这样你好拆分。对吧，但现在是不一样。那所以说啊，咱们的这个flower这个轮模图这块的写法，你不能这么写。咱得让他和谁和list container当中的写法几乎差不多，那这样是不是可以拆分组件？这能懂吧，所以说咱们的这个newwaper实力就不在这儿了，咱们模仿list container的那种写法。可以怎么办？可以这么办，你进行watch。对不？你进行监听，但这回你监听的是谁？你监听的是list？

再来呗，叫list。那这块呢，你要注意啊，呃，咱们在list container当中写的是不是对象，写吧，那咱也写个对象。对不？对不，那这样至少说让他们的代码的风格差不多，这样好封装对不？那这里面你得写着写handle了。对不，那咱们先打印一下子，cons.log说，哎，我在。监听监听什么？我在监听flower。组件中的list的数据，咱们先看能不能监听到。数据。那老师呢，给你运行一下来刷一个新，那咱们先看一下子他能不能监听到。你看监听不到，为什么？哎，老师问你们。就是现在咱们想监听list，因为咱们想让它的代码和list container当入代码的风格是一样的，是不是都写的，是不是对象进监听，但是你会发现很尴尬的一件事。

就是在咱们的这个flower组件当中，你是监听不到list的变化，为什么呢？为什么呢？咱先不说立不立即鉴定，就是为什么。就为什么监听不到。对，因为数据从来都没有变化，为啥？因为你想想数据是谁给的，是父亲给你，父亲给我的时候，他就是一个对象，对象里面有东西了，对不对，他从来没有发生过变化，就这能不能懂。就这能不能懂，能懂给老师扣一个一。也就是说flower的数据是来源于谁，来源于父亲给的，那父亲你给我的时候，它就是一个对象，是数据，是那个服务器里面那个数据就是一个对象，而且它的值从来没有变化。

对不，所以说他监听不到，那你说监听不到怎么办呢。你鉴定不到，你没办法写了。对不，那你就得用到谁，用到in米来。我管你数据有没有变化，我上来就立即监听一次。对不？我不知道这玩意你们学没学过，叫in。叫做I'mme因me为啥为true。这代表啥？代表的是立即监听。就是我不管你数据有没有变化，我上来就立即监听一次。对不，这是代表啥？代表是我管你，我就是我不管你数据有没有变化，我上来立即。监听一次就这玩意儿，我不知道你们学没学过。以米为true，学没学过，学会给老师扣一个一。学妹学过以米尔塔为触的这种写法，代表是利即兼轻。

就是不管你数据有没有变化，我上来立即监听一次。学过吧，啊，所以说这块一定要注意，就是咱们也说一下为什么。Watch。哎，Wac watch监听不到谁啊，哎，List的变化因为什么？因为这个数据从来没有发生变化，为啥呢？因为这个数据是谁给的，数据是父亲给的。那么父亲给我的啊，就是父亲给的时候就是一个对象，而且对象里面，对象里面该有的数据它都是有的。啊，就是该有的数据都是有的，哎，都是有的，他从来没有发生过变化，所以没办法，咱只能用到谁因用到因米第。就这能不能懂可以吧，啊，所以说你看这回我不管你发没发生变化，我上来立即监听一次，你看吧。

对吧？但有同学说，老师为什么打印两次？很简单，因为咱们有两个flower组件，这两个flower组件实例都在进行。OK吗？那所以说这回你就可以把代码放在这儿了，但是也要注意。你虽然监听到数据了，但是还是一样，可能你的结构还是没有。对吧，就是你现在在这儿还是要注意，你监听只能监听啥，就算你监听到了，你只能。监听到数据已经有了，但是V杠放动态渲染的结构啊结构。哎，结构啊，应该是几啊，应该是一，我们还是没有办法确定的。确定的。所以说因此还是需要用到谁，用到nice。

对不，这还得用到它，所以你看这吗，这点a Dollar next。TY。呃，Ti单词前面说。Dollar叫做nest ti take还是一样道理，有回调，对不？把咱们的这个LA往里一扔不就完事了？哎呀，哪去了没了呢？一扔还扔不进去了啊，我找一下子一没保存是吧？行，那咱们把list container当中这个咱给它捞回来。对不，那不就是呃它吗，对不，CTRLC它log。对吧，往里一扔，但是你别忘记啊，你要把这个呃，Ref要改一下子ref咱这个叫啥，看一下子咱这个ref叫叫叫叫。叫啥来着，我看一下啊，轮播图在哪起来的轮播图找一下。在这呢，应该叫做坑。对，不挨点坑，那这不就完事了，对不？所以说现在这个写法，老师还是那句话，什么都没有变化，跟以前的效果都是一样的。

OK吗？就跟以前的效果是一模一样的，没有任何变化。OK吧，只不过是把写法稍微变。就这能不能懂。能懂吧，那所以说为了捞出一个共用的全局组件，让他俩代码风格让他几乎一模一样，那所以说你把他人家这儿。就是把例子contain到这儿，咱也不管他用不用，你也给它加上一米。I me dit为处，那这样他俩的写的代码几乎就是一模一样，那剩下是不是就拆出来封装起来就好？就这能不能懂？老师为什么说不放在mount当中，因为我想让list container和flower的写法的风格是一模一样的。一模一样的好处是什么？就可以拆分组件，就这能不能懂，能懂的给老师扣一个一。

比如说你放在mon当中可以，你不拆分共用组件放在mon当中是以的，但是为了拆分组件，让他们的书写的代码几乎是一模一样。正好拆组件。OK吧，好嘞。那咱们接下来拆的这个组件呢，应该是一个全局组件，大家共用的。那所以说放到哪个文件夹当中，是放到康普闷兹，因为当年咱们也有一个组件是公有，就是type nv。对不？那所以说这回咱们再来一个文件夹，叫啥叫car carro us，见到这个单词你得知道是什么，是不是轮播图。对不，这个以后咱们学饿了么UI的时候也是一样，叫E就是轮播图对不？那当然那你得搞了，得拆组件了。那咱们找到咱们的comp资下的carous，它也得来一个共用组件，叫index.will。

对不，那就是模板嘛，六一。那咱给他来个名字叫啥叫c sou啊EL对不？那剩下的活不就是把这个轮廓图给他摘出来嘛，大家共用。那随便找个地儿，因为现在list container的写法和咱们的这个这个这个这个flower几乎是一模一样，那咱们找就近的吧，Flower。那也就是说咱们需要把这个轮播图的结构行为啥去捞出去。对不？那也就是说现在老师是在的是哪个轮播，是在哪个组件，当是在flower当中，咱们把这个轮播图给他干掉。对不？咱们得一个个找第一个。轮播图的结构，你得给我带走。对不结构就不要了，也就是说这块它没有轮播图了，看吧，这块它没有轮播图了。结构咱们给他带走，OK，咱找一下咱的呃，Carousel结构给他带走。

那这再给他干掉，那格式化一下。那当然啊，咱捞出来的这个结构当中，要不要用数据要。你看嘛，咱捞出来的这个结构要不要用数据，要是得用咱当年那个数组。对不？哎，看这对不对。这块一定要注意，你捞出的时候要提醒自己，将来咱们是不是得建立一个数组。对不，数组里面有多少个对象，我就有多少张图。这块一定要注意，你捞结构的时候一定要注意，就是将来你还是要给这个组件传数据的。给这个轮波图主教。你还是要给这个龙波图组件传数的，你要传什么传数组。数组里面有多少个对象，我就有多少张图。对不，那这块呢，咱们就别再叫list，它咱们就叫做叫做叫就叫做list。可不可以，但是现在外部没有给传呢，那将来你要传了，你这块你是不是得接收就来个谁。

就这能不能懂。那这个咱们就叫list。哎，这能看懂吗？能不能看懂，能看懂给老师扣个一。就是将来这块的结构一定要注意，它是得遍历一个数组，数组里面有对象，对象有多少个，我有多少张图，将来父亲给他传的名字咱就叫list，但是得是一个数字。OK吧，好嘞。那咱们回到咱们的flower这儿，还是回到这？那你说结构，咱们刚捞捞走轮波图的这个地儿，咱结构捞走了，来再看这，那老师问你在咱们的flower组件当中还在还用inwe。就是在咱们的flower组件当中还用引这个swaper就不用了吧，谁引？他这引一次就行。对不？就是咱们的这个全局组件，呃，Car是不是也就行了，对不？那以及你来看这。

他这块的写法你就不能这么搞了。对不？你把这个watch得带走了，带到哪？带到咱们的这里。对，不在这里进行watch。对不？诶，对不对，对吧，而且正好监听的数据是谁，是这个list。OK吧，好嘞。那接下来你要明白的一件事是什么？它将来是一个全局组件，全局组件的好处是啥？是注册一次之后就不用在在别的地儿注册了。那所以说把咱们的这个全局组件回到入口文件当中，咱们注册一次。对不？那咱们当年已经注册过一个全局组件，就是它了，对吧？那再来一个呗，这是啥？这是咱们轮播图引炮谁cel for from谁呢？是不是应该是艾特杠？

这个这个提示又慢了，艾特杠。对吧，相反cons下的CU。Sel，对不，你只是引入，你还要注册，注册也还是一样。Voe。点。Complement。哎，Major啊，Complement这个组件的名字carousel，第2NAME，刚刚name我已经起了，以及carous。对不？那你注册好了，该有都有了，那你是不是，你看这该有都有了，但你要注意父亲得给他传数据，你不传数据这块是没数据的。对不，那所以说你就回到咱们的给它遮挡，就回到咱们的这个floor当中。你在这直接写一行代码就行了，写谁写car就行了。叫做car，对不啊，Car。对，不，但是你别忘记了，现在他是一个什么关系，是一个父子关系。

诶，老师问你现在这俩组件是不是父子关系，就是flower和car是不是父子关系，你别忘记要给人传数据。数据的名字咱都记好，叫list，他传的应该啥是个数组，应该是咱们那个叫这个对象的，叫叫叫叫叫叫啥来忘了。看一下子叫这个对象的啊，等会啊，这个这个B和标签给他写上啊，完哪哪块他报错了，看下刷新。刷新应该是叫list什么什么玩意儿，我忘了啊，我看一下。叫丽，哎，等会我看一下在哪报错了啊，找一下呃。多了一个大花括号吗？List看一下子在哪呃。Car c，我看单词前面写错。呃，叫C2。Soul是吧，CC写错了C。

呃，CRO usel，对不？这回对了对吧，那这块呢，一定要注意，你得传一个数组。哎，不对啊，我看叫啥名字来着，我看看单词啊。就是这个c souel应该是叫这个。对不，因为咱注册的名字不就是要他嘛，对不给他捞过来。你这块一定要注意，你父亲你得给人家传数据，你不传不行，你得传的是一个数组，数组应该是咱们的这个，呃呃，对象的是啥来着，我忘了刷新。看一下啊，还有没有没有报错，这写错了是吧？啊这块写错了。就是在入口文件啊，单词写错了找一下。入口文件这块应该是I的comp资下的，就是他们不给提示啊，好恶心，艾特杠。艾特杠。行，老师给他关一下子，自己想象它有个提示啊。

看这啊，这个艾特杠是不给提示就很恶心艾特杠。出来他不出来，不出来，自己再手敲一下好吧，对准了单词写错了，应该是应该是艾特杠comp兹Co，哎，你看这回出来了，他下的啊car对不对。对吧，那所以说你看回到这儿，你一定要注意一件事，你得给人家传数据，但数据是什么呢？咱们看一下咱忘了。看啊，咱看一下子，它应该叫做每一个组件去组件这看。应该是咱们的这个floor下应该叫做list，点是不是它是不是这个数组。Carrot of this对不？所以你得传他那所说，你像这回，哎呀妈跑偏了，所以这回你自己看一下咱这块的，当然，呃，我看见他。怎么有波浪？啊，那这块咱不管，咱这应该是没问题的，对吧，那咱们先看一下，只要你刷新，你看这是不是就有了。

你这是不是又有，是不是又回来了，就这个能不能懂。这个能不能懂？说白了就是把它们封装为一个共用的组件。O不OK。O，不OK，你先不用管，那就这块能不能懂。这块哪需要K，这也不是便利呀，这不就是吗？喂。赵少康，你这块用冒号K吗？不用，你这块没V刚放啊，你哪来的K呀？对不，所以你看这不又回来了吗。对不，那当然咱们list container当中老师把没有线关了，List container当中来找一下。咱们把这个罗伯图也给他干掉。来先把结构先干掉，就这个轮波图这的结构先给他干掉，咱们不要。对，不但你看他传的是啥，看一下他传的是。Banner list list应该是那个数组。对不，所以这块咱就给他干掉了，那也就是说咱首页当中也没有了轮播图，你看这吧，这是不是就没了。

这是不是就没了，那当然以及S外咱们也不要了。对不，那以及wash这里咱是不是也不要直接干掉。对不，你只需只需要用谁是不是用咱们的carous全局组员是不是就行了，叫C叫啥玩意忘了。来，这单词别写错了，咱再粘一下，就这个名字。是不是就是他？对不，所以说你看拆成共用组件这种想法必须得有。OK，不啊，所以这块先给来个反斜杠，那也是呀，你也得传数据，叫做冒号list。对不为什么，应该是为咱们那叫banner list，那这样不就完事了，所以你看这个全局组不就拆分好了吗。就这能不能懂。这能不？当然说老师我不想拆分全局组件，可不可以，可以，因为业务已经完事了。但是最后老师还是想告诉你们一件事，什么事，就是以后看到页面当中有功能相似的地方，给它拆分为一个共用的组件，注册为全局组件，这能不能懂？

就这能不能懂。而且你拆组件的时候，那你务必像这几块要用的地儿，那必须结构啊样式啊，行为什么得是一样的才能拆出来。这能懂吧？所以说老师啊，最后呢，我在笔记当中呢，给你们写一下子。这块一定要注意，切记。就是以后啊，在开发项目的时候。开发项目的时候，那么如果看到某一个组件在很多地方都使用，你就记住了，都使用。都使用你把它搞，为什么呢？你把它呃搞为。全局组建。而搞为。哎，搞为啊搞定吧，就是变成。

全局组建。变成啊变成全局组件，这样的好处是啥呢？这样的好处是你注册一次。可以在任意地方使用，而且我最后再说一遍共用的组件，或者就是所谓这些非路由组件，你给我放到。放到。放到康曼兹文件夹中。OK吧，所以说到现在为止，咱们的home的首页就OK了。OK吧？