12. 尚硅谷_Mpvue_详情页数据动态渲染

好，来咱们继续啊，咱们上节课呢，是把这个详情页的静态页面搭建完了，那这节课呢，我们要将里面的动数据呢，动态的展现，那这个数据怎么个展现法，来我回退一下，大家看是在我们的主页index页面，我点击一个图出。哎，它呢会跳转到详情页，并且呢显示对应的内容，那这个时候呢，我们应该去干嘛？先把index是不是得提到上面，哎，提到上面以后呢，我们应该是在index的页面里面找到图书的个体，是不是就是它，那这个时候呢，咱应该去给它绑定一个点击事件，叫to detail，对吧？好，那这个to detail呢，我们对应的在按method里边定义一下，好这呢我们稍微写点注释，这个呢是干嘛？哎，是跳转到我们的详情页，那用到的API咱之前也讲过NAV I get to，哎，这个to呢，都是小写啊，好在这里。

里边是不是应该有一个URL-pages，哎，得下边的这是什么呀？Me，来我们可以先测一把啊，能不能跳，那来到我们的项目走。嗯，可以跳转没有问题，那接下来呢，啊，我们需要做的事情是什么，那就是点击的时候。把数据传给霞青是不是就OK了？好，那要传的数据是谁呢？其实就是图书的那个对象，你这显示的数据来源于哪呢？来源于我们之前啊这个data塔。

这个文件对吧，那这里面的信息你在主页能用，在详情页也能用，那现在的问题是我们点的时候怎么去传数据。嗯，没问题，那呃，首先我们知道在view里边定义方法的时候，如果是需要传参，我们是不是可以加括号调用啊，反正我们要把握纯导的数据是不是正好是读书的个体。那所以呢，这个时候我们可以在这呢去设明一个book I，那这个book item没有了，接下来就是说在路由跳转的同时，是不是要把数据带过去，哎，这个呢，之前咱们也讲过啊，用到的方式呢，应该是什么形式呢？Query形式，那就是这啊book item等于然后去拼接一个它，我问一下大家我能不能直接放它呢？哎，可能有的同学忘了啊，来我们先来看一下啊，我就直接拼它拼接了以后路由跳转到详情页，我们在哪去拿这个参数来着。

啊，来，我们先把对应的生命周期函数写上，我去给大家打印一下这个race，啊打一下race，那这个时候呢，过来走好跳转到详情页了，然后呢，我们打印出详情页组件的实例对象，对吧？来点开它，我们来看一个东西，Dollar map。啊，Dollar map，那这个呢，是不是就是小程序的那个对象呀，事件对象来在这里呢，我们去看一个东西叫query，它呢里边是不能获取到对应的参数啊，大家看不管HM是key value这是啥呀。字符串，哎，这个是怎么来的，咱说过对吧？呃，当你路由跳转的时候，这儿传的数据必须是字符串，如果说是非字母串的怎么办？它会自动的去帮你调用to string，那我们对象调用to string转换完是不是就是中括号的object？

那既然是这个东西呢，那我们就要预处理，因为啥，因为这个数据呢，对于我们来说根本不能用啊，根本不能用，所以呢，在这儿应该是啊j.string是不是把它拎过来，哎，拎过来以后在详情页，这应该是怎么拿呢？哎，Consolo this.map点什么呀？呃，应该是query对吧，里面叫个book来我们看一是不是啊。走你嗯，大家看数据是不是拿到了，但是这很明显是个阶层的数据，哎，如果说我们在详企业要继续用的话，那这个东西是不是应该反向的给他家编译回来，接着点pass呀。

同时页面里边要用的话，你是不是要更新到data塔里面，OK，所以呢，我们最好是初始化一个数据，比如说就叫个book item，哎，默认是空对象，那接着我们需要做的是什么？把这个更换过来是就可以this.book item打印这一堆，那上面写打印测试，我们就不需要了，好在这呢，我们再测一版啊，点击跳转，哎，之前呢跟大家说过啊，呃，用打印的方式可以看，然后呢，我们要确认数据到底有没有更新到当前页面的实例呢？我们也可以去看控制台上边有一个APP data的选项，哎，在这儿呢，你看这个是第一个页面index，那这个是吧，详情页来我们点开这些箭头。里边是能看到我们想要的数据的，如果说有说明是更新进来了，哎，没有问题，那有了这些以后，我们详情页上面的内容就可以拆掉了，比如说呃，这个标题我们就可以撤掉它，呃，这呢，应该叫book item点嗯，Title出的名字，哎，这个呢，Item，诶，Book，嗯，Item点儿什么啊，Image，那剩下的也是一样的啊，我把这个拎过来，路遥这换了出版社日期定价，那对应的内容呢，我们看看啊，作者是other，嗯，出版社啊，Publicr来把这个换一下出版日期，嗯，PU。

啊，把这换一下最后的定价price。丢过这来，那剩下的就剩这儿了，来，同样的把这一堆我们拿过来一份，这儿呢，换一份，上面作者的简介应该是什么？Author它来，把这个丢过来，那剩下的一长串那就是内容的简介了。好了，这个时候我们再来测一把，走你。

哎，正数其他是好的，但是图片上没出来，那说明图片这没有解析的了，咱们是不是少加一个冒号，OK，再来看一把。啊，换一个吧，解忧杂货铺，嗯，是不是没问题了，那在这儿的效果呢，其实是没有真机的效果好，大家要看的话，可以在真机上去看一下，OK，那到现在为止呢，我们页面里面的数据呢，已经动态的展现了，哎，但是还有一个东西没有做到位，大家看这。这儿这个窗口的数据是不是写死的，你们可以看一下我写好的这个啊，哎，上下应该是一致的才对，应该是一致的才对，那怎么做到这一点，我们之前都知道，哎，如果说我要单独的去设置这个页面的table bar的时候，哎窗口的那个配置的时候，我们可以怎么做呢？你比如说我在这去创建命点JS对了吧，哎，至于说要设置什么，我们跟window这是不一模一样，哎比如说我要设置它，那这个时候呢，我把这个拿过来啊，这儿呢是我们稍微写着啊图书，嗯详情来我们看看能不能实效啊。

走设置上是设置上了，但是这上下很明显不同步，而且我们今儿写的话，这是不是写死的呀？啊，那这个时候呢，再给他介绍一个API。好，那这个API叫啥呢？因为它比较多，我直接去搜一下set navigation bar title，看这一个动态的设置当前页面的标题，来我们看一下这个API怎么用，点击过来。

哎，稍等一下，这个网稍微有一点点慢啊，再点一下。哎，那这个应该是网断了啊，没有关系，那接下来呢，我们给大家自己去敲一下，这个刚才我们看到的叫微信点set navigation，然后bar，嗯，Title啊，界名之意，那就是设置我们导航窗口的文字标题，它里面呢有一个title，哎，这个title呢，就是你要动态设置的文本内容，而我们要设置的文本内容是不是来源于这个对象，哎，这个对象里面呢，有个属性叫title，我们刚才也在用了，那既然是动态设置的话，其实你对应的这个就不需要了，把它设掉吧，刚才呢，只是用于给大家演示啊，来，我们去看一把行不行啊，走你。

哎，这个时候大家看咱们窗口的文字是不是就是动态的，OK，那到现在为止呢，我们当前这个详情页呢，啊，基本的结构以及数据动态展现都做完了，好我把视频停一下。