37_尚硅谷_Vue_案例_搜索

初始化显示做好以后下面做什么？交互嘛，我就正面就一个交互。输入关键字。点击搜索。接着。这个界面是不是发生变化？等懂吧，好，这里有一个非常严重的问题，什么问题呢？你说一下我们的那个，呃，加请求的那个代码写在哪个组件。是写在设计还是写在main里面？你就发A加请求的代码写在哪个组件里面。为什么是命而不是设计，我觉得是设计，因为这里面按钮吧，一点就发请求嘛。为什么会涉及到里面去？主要是我在在前和后都需要去更新我当前里面的状态。真的吧？如果我在另外一个组件里面发请求，那更新起来特别费劲。

这个能懂吗？能懂啊好。那我什么时候去发呢？是在monkey里面发吗？是还是不是，我是在monkey这个以前我们都在这里发吗？是在这里发，而且请求吗？啊，这个很关键，是还是不是。不是你看嘛，出发显示有显示列表没有啊，根本就没发请求。我们当前这个效果开始没法请求吧，什么时候才发点击这个设计啊，对不对，所以不能在这个里面做对吧。到吧，啊OK啊，这个不是啊，而是在什么呢？而是啊在点击设计之后，对吧，好来看着啊，这里有一个事情，这是一个组件对吧，这是一个组件。

我们在上面这个组件里面1.1，就要去通知我的另外一个组件是不是做一些什么事情，这实际上就是组件间通信了。能看出来，而且还有个事情，我们现在是什么关系。我们这两个组件什么关系，兄弟嘛，设计和这个命是并排的。对吧，那兄弟之间啊，通信该怎么做。有两种办法。一种最简单的方式肯定是pass。他没有位置的要求，知道吧，再一种比较费劲的就是用pro。但是用pro得借助于谁呢？负元素？啊，就是负元素。啊OK，也就是说我一点设计，我就把这个数据交给什么。

父组件，接着父组件把这个状态交给谁下面的这个may子组件。对吧，OK。这个稍微要麻烦一点。没，那么我们用怎么做。就是你直接把消息发过来，我接到消息是不是就会调用啊。嗯。那也就是说现在我要问一个问题，我们在哪去订阅消息，哪个组件想清楚啊，别着急，想清楚再说，在设计还是面里面订阅消息。啊，大家想订阅消息相当于什么？绑定监听对不对？发布消息相当于什么触发事件？那你说我们在哪个组件里触发事件呢？

他明显在色情嘛，你消息是从色情里面传给那个魅力嘛，也就是说消息是这样的。对不对，那也就是说我要在这里面是不是有一个监听，也就是说有监听就是订阅消息嘛。是不是这意思，那我这边上面这边干嘛。是不是触发事件，也就是什么发布消息，这个一定要知道，哪个位置发布，哪个位置订阅，你要这个都搞不懂，那基本上你就不用做了，没用。说白了，这个发布和D就是我发布的人去通知另外一个人嘛。这不就是通知吗？比如说当我点击设计的时候，我是不是通知他，我传过来一个新的关键字，你去搜索呀。对吧，好来做吧。那也就是说我们在设计里面注重啊，这个其实也并不难。首先我们这个地方是不是要去自动收集数据啊，这个就叫社区内吧。

可以吧，这对好了，这里面有个按钮。叫at等于就叫设吧，好，这里面应该怎么写？先来一个什么date date，你有什么吗？是吧，开始什么工，好，接着我应该还有一个什么。是message对吧，好有一个什么设计方法。当我去调用设计的话时候，首先我是不是得读到这个数据，读设计等于this点设计点。什么时候才会真正去搜索，你要有值吧，我才去搜索去吧，我自己本身不搜索，我是发一个消息出去啊对不对，发布搜索的消息吧，搜索的消息怎么发布。

北引路。你们谁？Pub sub from。怕不下干。是吧，好，下面。发布消息啊爹。Publish消息名。发布搜索的消息。消息。就最简单，就色系赶紧收啊对不对，好要不要传数据。插嘴。Such。是这个概念吧，也就是说我发布一个搜索的消息，传过去一个他需要的数据吗？好，那这是发布消息，还有一个方面叫什么订阅消息，我再把订阅man在man的什么时候订阅了，哎呀，一上来就应个订阅就在这。

懂不懂啊，订阅一个来看呢。订阅。嗯。订阅订阅什么消息？搜索的消息吧，啊，搜索的消息来。干嘛引入import？怕不怕不是吧，来订阅一下，怕点对吧，消息明。设计回调函数是吧，回调函数这函数对吧？好这个地方的参数。第一个叫message，第二个是我们对对，取个好名字。

是不是天你传过来不是吗？好，那这一个方法就说明什么。说明是不是需要去发和价值请求进行搜索，需要发和价值请求进行什么搜索？来吧，那不就是刚才那我们写过一遍吗？大家看我们要用什么来，我们这一次还是用access啊，因为现在是推荐用它access from。对吧，好，下面来说一下，我们要搜索是不是得有一个接口路径，对吧？啊这个UI呢，我们这里面也准备了，就接头啊。来，这一个值是动态的。懂不懂，所以我这样写什么？

下面的事情其实就跟刚才一模一样了，来啊，我下面是不是要准备去发A请求啊，发A请求，但是在发请求之前。你是不是得更新状态，你想想我一旦请求的时候，他是不是要维护，而他要为什么？有更新状态，更新为什么状态了？请求中的状态吧，下面是不是发请求句，发请求就两种结果。来那种成功还有什么失败？对吧，如果成功了啊，成功了啊，更新什么状态，更新为什么他不呢，那成功的状态呗，那种是吧，好了，下面如果什么失败了，那你是不是要更新为什么失败的状态也是更状态，只是我是一个什么失败的状态。

先看着吧，好来吧，更新状态，更新哪几个？这两个吧，它应该为什么，This应该为什么。是可以吗？好，接着我这边发请求，点get。写本上固定啊，写多了发现出result response点。那到底它是个什么结构？有两种处理方式，一种你通过浏览器去访问一下，再一种你打印输出一下，是不是也可以。啊，这个地方来啊，我们就通过浏览器访问一下。这里取一个啊关键字行AA吧，随便。

有吧，有。那我们要取的是什么？IT4。对吧，而里面每一个下面都是一个什么。这是个什么概念的东西？我说的什么去的有的是，那每一个对象都是个什么游者？但是有个问题啊，这个里面数据是不是很多，我没有必要要这么多数据，我们刚才说过设计过啊，我们的数据是不是有个结构的，好先取出来再说啊。也就是说，现在我可以得到一个user，怎么得了result点？但是这个user跟我所需要的user有点差别。差别在哪了？大家看啊，我们这个叫名字ul，阿凡达ul，你看他叫什么名字，要名字是不是罗是他的名字看到吗？接着有一个，诶这个刚好跟他一样是吧，还刚好好下面啊，他是这。

分了吧，那也就是说这里有个问题，属性名不一致。对吧，对象的属性并不一致。那这个你说现在这么搞的行吗。也就这里面，我要user是好，我现在就更新状态，你不更新为成功的状态吗？我假设这样可以啊。我取到数据更新成功的状态，看到点loading，为什么force啊，this.users等于users，你说这样行吗？这不行，肯定必然不行，为什么呢？因为这一个user使里面的user者它没有这些属性。听到不只有一个刚好对的对不对，那这你到时候那这个属性就显示不出来呀。是吧？现在我们要去调用数组的一个方法来实现。

好，现在我们要分析我需要的数组和这个数组，它有什么样的，有什么样的共同点和有什么样的区别。对吧，首先个数一样嘛。我需要的速度跟它返回的这个速度个数是不是一样，比如说我要不要过滤。我要固定，也就是说本来他查出来100个，我现在显示50个。是吗？不是我把所有列表都显出来了，对吧，所以个数是一样的吧。只是那个对象是不太一样。用什么？个数一样，对象不一样对吧，而且这个地方是不是有一个一一对应关系。第一个对应第一个，第二个对应第二个。用什么？要用数组的一个方法。

一共就那么几个，Filter map reduce find啊，对吧，就这几个。返回数组的也就那么两个，Filter和map。这人想不出来，一共就那几个用map，为什么说用map？你想想看，我们第一次用map的时候怎么用的，是根据数据的数组返回什么标签的数组。是吧，也就说数组里面的是不是对象是发生了改变，但个数变吗？对不变是有一一对应关系，一定要把这个特点搞清楚啊，所以我们现在要用一个它的一个方法叫什么呢？卖。好来不是啊，不在这写错位置在下面是吧？对什么卖来一个item好，最终是不是返回一个对象看着啊，这里面有个事情，我最终要返回一个对象，我这么写行不行。

行不行不行，这么写它是一个函数体，对不对啊，要在外面加个什么括号，再先加个小括号是吧，先加个小括号，接着再加个什么大括号。那这个对象里面的属性是哪些了？写这几个。是不是这意思啊，关键我的属性值从哪读了，哎是吧，好这个是他的那个ul是H天是吗？啊小U是吧，好这个。好像刚好跟这个什么一样的一样的，你也得写。阿凡达下划线ul那吧，好用这个吧。有没有看到啊，OK。

好，那这样的话呢，得到数据以后，那我们现在就可更新啊，没问题，下面还有一个失败。失败我可以怎么做？有一个点看是吧，那我要更新为失败的状态吧，更新为失败的状态也是一样，先把它变为什么for，接着this时点error message等于一个值吧，我简单写一下啊，请求。三啊，简单写写二。就是卖手机吧，没问题。那也就是说现在呢，我就把整个都做好了，来，现在我们要去看一看，看看行不行啊，先刷一下看看报不错，诶不报错，这边输入一个AA搜索loading。没问题吧，没问题，好，我收录一个BB。不对呀，好像。有，你看。

什么意思？有点不太好，什么不太好了，当我在搜索中的时候，我还显示以前那个列表。看着。能不能看到啊，OK，那怎么办呀，这。为什么它会以前那个列表会显示呢？因为上一次是不是有这个优的数据，说白了，初始的时候在这里你要做件事情，Z时间优时等于什么，那还一个Z时间把这个搞了，搞到初始状态是吧。这样是不是不会出现了，来看一下是不是啊。看一下就知道啊，SS走里。这是一个吧，好。是不是可以啊，可以没问题，当然我可以点过去是吧。可以点过去啊，是没有问题的。啊，这样呢，我们就做了一个这样的一个事情啊，这个里面啊，有一个用到一个最。

我们现在是不是要兄弟组建间通信呢？这个时候用帕萨网非常舒服。如果你用pro还是比较麻烦的啊。哎。好，那整个的我们就写完了，下节课大家需要去写两个应用啊，一个是to啊，一个是这个设计。这个设计呢，应该是以前写过类似的对吧？啊，这个语法有点不太一样。