20. 尚硅谷_Mpvue_搜索界面完成

好，来我们继续啊，我们上一课呢，是去前后端实现了一次交互，并且呢成功的拿到了数据，那这节课呢，我们要做的是拿到数据以后去展现对应的列表，那这个列表呢，其实我们已经分装过了，已经分装过了，我们对应的叫什么叫box list这个组件，对吧？那首先我们要做的是什么？第一步先把对应的组组件呢，去给它引入过来，叫book at least from上一集，呃，Books list下面的。Index引用了以后呢，哎，因为无用的语法，所以呢，我们上来是不是要注册一下，嗯，Component好，在这里面呢，去把对应的这个组件丢过来，然后在这儿我们去，哎放置。因为在这个搜索的下面，是不是要去放这个列表的组件，诶没有问题，那接下来我们唯一要做的是不就是拿到数据去在这儿便历，或者说是导给他，因为啥呢，真正便利的动作是不发生在这个总结内部呀，那也就是说我们应该是把数据传给人家，又因为呃，模板的数据是问data塔要的，所以呢，在这儿呢，我们。

谢谢，干嘛？你得放到data里边，然后呢，由实例对象是不是去代理啊，在这儿呢，我说模板的数据问data要其实有点不太准确，他应该是问我们实例对象要，那这个时候更新到data是不是更合适一点，来我们来个books对吧，默认是个空数组，那紧接着拿到了数据以后，我们这这个就拆掉了瑞它，哎等于这这个data塔，然后拿到数据以后呢，我们这个数组是不是就可以导给。我们这个books list这个组件，那接下来来到books list里边，我们看一下，那人家通过标签属性给你传过来，你这是不是得声明接收一下啊，在这呢，就叫books away就OK，哎，如果说传过来以后，这是不是就能正常显示了，来我们看一眼是不是啊。

那这个时候呢，刷新一下，大家看一下啊。啊，这报了一个错啊，报了一个错误，这说的是什么呀？不能读一个属性query，呃，犯，而且这说的一清二楚，在search book的生命周期函数already里面，那already这是小程序的钩子函数啊，但是我们知道在这报了错，他又说query，我们哪用到query了来。我们看一下啊，Search book里边根本没有query来报错呢，也是在我们用上这个组件之后，对吧？现在呢，我们来到book斯利斯里边，大家往下看，这儿是不是有一个query，哎，之前明明好好的，为什么在这儿就报错了呢？

对吧。你想一个问题，我们之前这为什么有五块人？什么时候用的宽容，哎，那是在我们图书列表这，我们点击这个更多，是不是跳转到我的图书列表页的时候，传数据需要点query去获取呀。哎，那是通过路由跳转的方式到的boos list，而现在我们是在搜索页面，我并没有通过路由跳转去给他传参，对吧，没有传参，那这个时候它正常的就是一个组件嵌套来，我给大家打一个东西啊，Consolo this，那这一把我们在search页面再来看一把。那这是这个意思啊，你去找一下有没有那个query。我们要找宽瑞呢，应该先去找谁啊，找这个Dollar map吧，那这个时候没有小程序的API跳转，你要注意它是不会有Dollar map，那没有它，那更和他怎么会有query呢？所以接下来是不是才会报错啊？那遇到这呢，我们就要思考了，我们写的这个books list现在是不要复用了，那要复用的话，你就要考虑很多的场景，一方面呢是通过路由跳转传参，我们需要获取，另一方面是不是通过props啊，标签属性的形式传参，我们也要接受啊，那为了避免不报错，你要考虑这什么时候用。

是不只有在在什么情况下，哎路由跳转的时候使用呀，所以呢，我们得去判断一下判断什么，如果说哎这个Dollar map存在，证明是把路由跳转过来的，那这个时候呢，我们才可以放心的去使用它，否则的话，它是不自动能找到pro里面的数据啊。

啊，在这呢，我要跟大家说一下啊，你看我这pro也声明了boos away data是不是也有啊，Data也有，那这两个不会有冲突吗？但其实是不会的，熟悉没用的同学，你应该知道，我们pros里边的数据和data中的数据，最终什么都会被我们的组建实力对象代理啊，所以说他俩不会有冲突啊，即使一样，那无非不会就是啊，后者覆盖前者而已。好，知道了这个以后，我们来到搜索图书的界面再看一把，走，大家看这个列表是不是就出来了。嗯，没问题，好，那出来了以后呢，我们再思考一下啊，来到这个搜索图书这，你说这个组件上来，有没有必要就让它加载。加，可能有同学说了没有必要，为什么呢？因为刚开始用户在没有搜索的时候时候，我这个booksrra它是没有数据的，那这个时候再去加载一个组件，这不就浪费吗？

所以呢，在这儿我们可以干嘛也去做一个易处理，那这个预处理呢，我们去给他一个div，好，那什么时候去加载这个div以及下边的内容呢？我们可以用一个杠if，比如说判断下book，如果说大于零意味着是不是有数据啊，那除了大于零不就是等于零吗？等于零这是false，它就不会加载，性能会好一点啊，好一点，我们再来测一把，诶，没问题啊，至于说一共多少本图书，这个太简单了啊，就是拿到它的愣子去显示一下就OK，哎，就OK，然后呢，我们这儿点了清除。啊，点清除的同时打看我能不能这样把下面的这个。列表也给他干掉了。

啊，有同学说可以，其实很简单啊，很简单，我们清除的功能是在handler clear，那我们这一步什么清除那个输入框的内容，你接下来其实要做的是什么？就把这个数组再给它置为空，是不是就可以？嗯，来，那这个时候呢，我们再来看一遍啊，来到我们对应的搜索图书界面走，你点击叉号，哎，是不是就进步了，好到现在为止呢，我们就完成了全部的搜索功能的啊，搜索界面的功能在这呢，大家要注意的是什么？这里面涉及到一个图书列表总结的复用啊，我们要去分析考虑它的场景，好这一节课呢，我们先讲到这里。