11_尚硅谷_Vue项目_HeaderTop组件.avi原创

好，我们接着上午来说啊。啊，这是我们上午做到的一个位置。那下面呢，我们来去针对啊，我们四个路由的导航组件来做它。作证。没屏幕是吗？有吗？没有再空一下啊。这边屏幕的话就是应该你没连上。好了吗？嗯，那我们继续啊。也就是说我们现在有四个路由导航的组件啊，它那个头部基本上类似，对吧，基本上类似，那我们呢，可以用一下把它们。

都抽成一个组件，而这个组件呢？来说一说它中间有一个固定的标题吧。只是标题的内容是变化的。大概看一下这个内容是这个下面几个的内容是不太一样。对吧，而他的左边和它的右边啊，可能有东西，也可能什么没有。那这里面就会用到一个技术叫lo。中间接收的这个文本可用pro。这个能懂。啊。这个先要去理解这样一个需求啊，有了这个需求以后呢，下面我们才去继续的往下做。那也就是说我们现在想到的是，我们现在呢，需要去创建一个组件吧，那是路由组件还是一般组件呢。

应该是一般的组件吧，啊好，那是一般组件，就创建这下面。啊，下面呢，给一个名字。那这里面呢，我取的名字呢，叫hand pop啊，不是叫hand啊，叫hand就顶部的或者叫top hand都行啊，这里没关系。来。接着创建对应的。View文件是吧。Many。好，接着呢，要把那个模板的部分给它抽取，抽取出来看一下啊，抽一下我们去找一下set。找模板。这不是那个头吗？能不能看到，好，把整个头部拿过来。

拿到我们的hand top，哎，我的hand top去来了这里是吧？啊，这些没有的都给它干掉啊，太多了。来，把它拿过来。来过来之后得说说一些事情，大家看到这里这个格式啊，格式不太好，把它格式搞一搞。这。还有下一个啊，这个这个里面我们说中间的部分是不是固定有这个结构。只是这个内容是什么？是不确定的，应该接收一个属性吧，那我这里面啊，假设这个属性叫title可以吧，那我这里应该写什么，抬头。对不对，和上面这个呢。需要吗？不需要，但是我需要有一个什么插槽占位吧，那就来个什么，我下面是不也是一个。

这个呢，两个lo总得识别吧，怎么识别？需取不同的name属性。啊，假设我这个就叫色系啊，我反正主要是我现在只只有这种情况啊，传的话传的色系这个传的什么，或者你这个你当然你也可以叫拉的行不行。各位，你至于传什么，我也不管对不对，好这边呢。那你就应该知道叫什么。这个能懂吧，好，样式完整的把我们的这个M里面所有的样式啊，最完整的一个样式全部搞过来。就这整个记住CTRLX。

懂不懂啊，剪切。放在我当前的这个里面能不能啊，所有都放好了，那放好以后啊，放好以后我这个组件要接收一个属性那的声明了。是不是怎么视频来什么名字，抬头吧是什么类型。那我们的这个组件其实就基本上写好了。那写好之后怎么用呢，对不对啊，怎么用看呢，先看这M。用组件不就那些步骤吗？第一步引入对吧，我们叫它什么hand top from。Components。下面的。

Hand top下面的。下面干嘛，第二步映射成标签对吧，下一步。使用。啊，先不把下面的这个概念啊，先留着我们现在写写，也就我写应该怎么写呢，怎么写给它传一个什么title等于。等于多少？是不是应该等于这个。是吧，就应该得他吗了吧，好，那够了吗？不够，是不是还有两个插槽需要我去传标签结构啊，其实是不是就传这两个标签结构。这个能不懂这一个拿过来看下X。放在这里。

行吗？这样就够了吗？不行，你得指定当前这个时SPA插入到哪个插槽了，这地方指定个属性不是内容啊，这个内容肯定是不行的，你想啊，这个内容本身就有内属性，对，不等于。我是不是有个有个right呀，诶这个就放到左边。下面这一个X。这个叫什么？这个还要吗？不要了。能看到这样，我是不是将我的这一个。M赛你们搞好了，M赛能搞好，其他的另外三个是不是类似的，也就类似的搞法都差不多大，看到我先还是因为这个写好遍了，我就不再起了，看订单先干嘛引入。

接着。映射成标签对吧，最后一步干嘛去使用啊，它的这个使用就更简单了，因为它不传插槽的内容对不对，所以说只需要传一个什么。开头，而且开头值等于什么订单列表，把这一些都给他什么干了，那另外的两个组件跟这个那一致性更强。Pro。大家看我啊，把这一个选中替换掉是吧。把这个拿过来。替换掉这个什么。看到啊，只是啊，这个里面是我的是吧，那我自己写一下这个叫什么我的对不对。

没问题吧，没问题，好下面啊，还有我的那个搜索吧，设计对不对，搜索也是一样，这不搜索嘛，是吧，一样的，这个使用的时候跟我的这一个啊是一样的搞法。只是传的授，传的是什么搜索？Hand给的什么，干掉？能懂吗？不然啊。现在咱还是基本的使用，大家看一下我们当前呢是没有任何问题的，都还是一样可以用，而且我们可以去看一下那个组件的结构V。已经有了吧。有了，我切换到另外一个word里面，是不是也有。

没问题吧？嗯，就这么简单。这里面其实我们用了两种传递方式，组件监通信的方式，一种是pros，一种是什么lo pros呢，传递的是数据，Lo传递的是什么标签？Lo呢，算不算用的特别多，但是呢，有时候也能用啊，所以大家要对这个语法有一定的熟悉度啊。行。