首页父子组组件 ajax数组请求各个页面

逃离我推掉我的手 2022-05-24 04:27 84阅读 0赞

首先在home.vue里创建一个data函数，里面存放了这个页面的各种数据

第一步 存入city

![20180520202521927][]，

第二步把city传递给home-header ,父组件给子组件传值是通过属性的形式。

![20180520202856897][]

子组件如何接受父组件传来的值呢，打开header.vue,在export default里接收变量city,然后把城市换成\{\}\{\}\{this.city\}

![20180520203315934][]

![20180520203228928][]

这里显示为空

![20180520203419228][]

当ajax获取到数据以后，拿到数据的内容，怎么获取呢

在Home.vue里写入

![20180520203734912][]

在控制台看到数据结构是这样的

![20180520204804312][]

这是Swiper.vue的源码 没有接收到ajax数据的源码

<template>
     <div class="wrapper">
      <swiper :options="swiperOption" >
    
          <swiper-slide v-for="item in swiperList" :key="item.id">
           <img  class="swiper-img" :src="item.imgUrl" >
          </swiper-slide>
    
          <div class="swiper-pagination"  slot="pagination"></div>
        
        
        </swiper>
     </div>
    </template>
    
    <script>
     export default{
      name: 'HomeSwiper',
      data() {
       return {
        swiperOption: {
         pagination:'.swiper-pagination',
         loop:true },
        swiperList:[{
         id:'0001',
         imgUrl:'http://img1.qunarzz.com/piao/fusion/1805/e5/59fad13a64807d02.jpg_750x200_713ae984.jpg'
        },{
         id:'0002',
         imgUrl:'http://img1.qunarzz.com/piao/fusion/1805/77/f63bd04dd5319602.jpg_750x200_6ba8e0ca.jpg'
        }
        ]
       }
      }
     }
    </script>
    
      
        
      
    
    <style lang="stylus" scoped>
       .wrapper >>> .swiper-pagination-bullet-active
         background:#fff !important .wrapper
         overflow:hidden
         width:100%
         height:0
         padding-bottom:25%
         background:#eee
         .swiper-img
           width:100%
    </style>

下面从json文件获取轮播图

同样在Home.vue里的data输入    swiperList这个字符串来自json数据

:![20180520210036293][]

第二步在组件标签里用list变量 把swiperList数组传递给home-swipter组件

![20180520210145173][]

第三步在Swipter里添加props 接收变量list

![20180520211042421][]

在swiper-slide里循环的不是

swiperList，而是

第四步，在HOme.vue里获取

![20180520211414432][]

此时，轮播图显示的不是第一张图，这是因为刚开始存放的是空数组，如何解决呢

加上这么一句话，意思是当list.length传送的数据是空时，v-if的值是false ,swiper标签不会被创建，只有当数据真正的过来的时候，swipter才会被创建

![20180520211731891][]

在模板里尽量不要出现逻辑性的代码

v-if="list.length"，

所以在Swipter.vue文件 data下面创建一个computed计算属性

同时把list 换成showSwipter

## 下面是Icons.vue 的数据接收 ##

源码为

<template>
        <div class="icons">
           <swiper :options="swiperOption">
             <swiper-slide v-for="(page,index) in pages" :key="index">
               <div class="icon" v-for="item in page" :key="item.id">
                 <div class="icon-img">
                   <img  class="icon-img-content" :src="item.imgUrl">
                 </div>
                 <p class="icon-desc">{
      {item.desc}}</p>
               </div>
             </swiper-slide>
    
           </swiper>
        </div>
    </template>
    
    <script>
        export default {
          name: "HomeIcons",
          data() {
            return {
              swiperOption: {
                pagination: '.swiper-pagination',
                loop: true },
              iconList:[{
                id:'0001',
                imgUrl:'http://img1.qunarzz.com/piao/fusion/1803/95/f3dd6c383aeb3b02.png',
                desc:'景点门票'
              },{
                id:'0002',
                imgUrl:'http://img1.qunarzz.com/piao/fusion/1803/95/f3dd6c383aeb3b02.png',
                desc:'景点门票'
              },{
                id:'0003',
                imgUrl:'http://img1.qunarzz.com/piao/fusion/1803/95/f3dd6c383aeb3b02.png',
                desc:'景点门票'
              },{
                id:'0004',
                imgUrl:'http://img1.qunarzz.com/piao/fusion/1803/95/f3dd6c383aeb3b02.png',
                desc:'景点门票'
              },{
                id:'0005',
                imgUrl:'http://img1.qunarzz.com/piao/fusion/1804/ff/fdf170ee89594b02.png',
                desc:'必游榜单'
              },{
                id:'0006',
                imgUrl:'http://img1.qunarzz.com/piao/fusion/1803/20/831d62d2e1c7be02.png',
                desc:'名胜古迹'
              },{
                id:'0007',
                imgUrl:'http://img1.qunarzz.com/piao/fusion/1803/96/c70f1e85ae4a4f02.png',
                desc:'自然放光'
              },{
                id:'0008',
                imgUrl:'http://img1.qunarzz.com/piao/fusion/1803/80/416c6ab3368d1f02.png',
                desc:'全部玩乐'
              },{
                id:'0009',
                imgUrl:'http://img1.qunarzz.com/piao/fusion/1803/80/416c6ab3368d1f02.png',
                desc:'全部玩乐'
              }]
            }
          },
    
          // 实现一个分页功能
          computed:{
            pages () {
              const pages = []
              this.iconList.forEach((item,index)=>{
                const page = Math.floor(index/8)
                if(!pages[page]){
                  pages[page] = []
                }
                pages[page].push(item)
              })
              return pages
            }
          }
        }
    </script>
    
    <style  lang="stylus" scoped>
      @import '~styles/varibles.styl'
      @import '~styles/mixins.styl'
    
      .icons >>> .swiper-container
        height :0
        padding-bottom :50%
      .icons
        marign-top:.2rem
        .icon
          position: relative
          overflow :hidden
          float:left
          width: 25%
          height: 0
          padding-bottom: 25%
    
          .icon-img
            position: absolute
            top:0
            left :0
            right:0
            bottom:.44rem
            box-sizing:border-box
            padding:.09rem
    
            .icon-img-content
              display:block
              marign:0 auto
              height:100%
              margin-left :0.2rem
          .icon-desc
             position:absolute
             left:0
             right :0
             bottom :0
             height :0.44rem
             line-height :0.44rem
             text-align:center
             color :$darkTextColor
             ellipsis()
    </style>

在home.vue里

![20180520214756681][]

![20180520214853308][]

![2018052021504574][]

打开Icons.vue文件，接收来自父组件的参数

![20180520214948247][]

把整个data全部删除，

![20180520215302515][]

下面获取recommend.vue的数据

这是源码

<template>
      <div>
        <div class="title">热销推荐</div>
        <ul>
          <li class="item" v-for="item in recommendList" :key="item.id">
    
            <img class="item-img" :src="item.imgUrl">
    
            <div  class="item-info">
              <p class="item-title">{
      {item.title}}</p>
              <p class="item-desc">{
      {item.desc}}</p>
              <button class="item-button">查看详情</button>
            </div>
          </li>
        </ul>
      </div>
    </template>
    
    <script>
        export default {
            name: "HomeRecommend",
            props:{
                list:Array
            },
            data () {
              return {
                recommendList:[{
                  id:'0001',
                  imgUrl:'http://img1.qunarzz.com/sight/p0/1609/96/96df0a14333c93b6a3.img.jpg_200x200_578c4e31.jpg',
                  title:'清泉，烟幕，轻舟',
                  desc:'尽览名胜旖旎风光，到古迹吊古凭今'
                },{
                  id:'0002',
                  imgUrl:'http://img1.qunarzz.com/sight/p0/1609/96/96df0a14333c93b6a3.img.jpg_200x200_578c4e31.jpg',
                  title:'清泉，烟幕，轻舟',
                  desc:'尽览名胜旖旎风光，到古迹吊古凭今'
                },{
                  id:'0003',
                  imgUrl:'http://img1.qunarzz.com/sight/p0/1609/96/96df0a14333c93b6a3.img.jpg_200x200_578c4e31.jpg',
                  title:'清泉，烟幕，轻舟',
                  desc:'尽览名胜旖旎风光，到古迹吊古凭今'
                },{
                  id:'0004',
                  imgUrl:'http://img1.qunarzz.com/sight/p0/1609/96/96df0a14333c93b6a3.img.jpg_200x200_578c4e31.jpg',
                  title:'清泉，烟幕，轻舟',
                  desc:'尽览名胜旖旎风光，到古迹吊古凭今'
                }]
    
              }
            }
        }
    </script>
    
    <style  lang="stylus" scoped>
      @import '~styles/mixins.styl'
      .title
        margin-top:.2rem
        line-height :.8rem
        background :#eee
        text-indent:.2rem
      .item
        overflow :hidden
        display :flex
        height:1.9rem
    
        .item-img
          width:1.7rem
          height:1.7rem
          padding:.1rem
        .item-info
          flex:1
          padding:.1rem
          min-width:0
          .item-title
            line-height :.4rem
            font-size:.32rem
            ellipsis()
          .item-desc
            line-height:.6rem
            color:#ccc
            ellipsis()
          .item-button
            line-height :0.44rem
            margin-top .2rem
            background: #Ff9300
            padding:0 .2rem
            border-radius:.06rem
            color:#fff
    
    </style>

下面是wekend.vue

<template>
      <div>
        <div class="title">周末去哪</div>
        <ul>
          <li class="item" v-for="item in recommendList" :key="item.id">
            <div class="item-img-wrapper">
              <img class="item-img" :src="item.imgUrl">
            </div>
            <div  class="item-info">
              <p class="item-title">{
      {item.title}}</p>
              <p class="item-desc">{
      {item.desc}}</p>
              <button class="item-button">查看详情</button>
            </div>
          </li>
        </ul>
      </div>
    </template>
    
    <script>
      export default {
        name: "HomeWeekend",
        props:{
          list:Array
        },
        data () {
          return {
            recommendList:[{
              id:'0001',
              imgUrl:'http://img1.qunarzz.com/sight/p0/1609/96/96df0a14333c93b6a3.img.jpg_200x200_578c4e31.jpg',
              title:'清泉，烟幕，轻舟',
              desc:'尽览名胜旖旎风光，到古迹吊古凭今'
            },{
              id:'0002',
              imgUrl:'http://img1.qunarzz.com/sight/p0/1609/96/96df0a14333c93b6a3.img.jpg_200x200_578c4e31.jpg',
              title:'清泉，烟幕，轻舟',
              desc:'尽览名胜旖旎风光，到古迹吊古凭今'
            },{
              id:'0003',
              imgUrl:'http://img1.qunarzz.com/sight/p0/1609/96/96df0a14333c93b6a3.img.jpg_200x200_578c4e31.jpg',
              title:'清泉，烟幕，轻舟',
              desc:'尽览名胜旖旎风光，到古迹吊古凭今'
            },{
              id:'0004',
              imgUrl:'http://img1.qunarzz.com/sight/p0/1609/96/96df0a14333c93b6a3.img.jpg_200x200_578c4e31.jpg',
              title:'清泉，烟幕，轻舟',
              desc:'尽览名胜旖旎风光，到古迹吊古凭今'
            }]
    
          }
        }
      }
    </script>
    
    <style  lang="stylus" scoped>
      @import '~styles/mixins.styl'
      .title
    
        line-height :.8rem
        background :#eee
        text-indent:.2rem
      .item-img-wrapper
          overflow: hidden
          height:0
          padding-bottom:33.9%
          .item-img
            width:100%
            padding:.1rem
        .item-info
          padding:.1rem
          min-width:0
          .item-title
            line-height :.4rem
            font-size:.32rem
            ellipsis()
          .item-desc
            line-height:.6rem
            color:#ccc
            ellipsis()
    
    </style>

发现那8个轮播图，定时旋转，如何去除呢

在icons.vue里定义option 和data

![20180520221603427][]

![20180520221534428][]

已经完成首页的数据传递，把代码传到git

输入 clear

cd 到文件夹输入 git add .

git commit -m 'index finish'

git push

此时已经被扔到线上，

master分支是稳定的代码，所以要更新 输入 git checkout  master,

让master分支合并最新的分支上的代码 输入 git merge index-ajax

然后 git push

[20180520202521927]: /images/20220524/7dec1c41b29b4dda837ae2ca25ed7e56.png
[20180520202856897]: /images/20220524/1862be3f53e44f92a6bc5ac9784d30a3.png
[20180520203315934]: /images/20220524/72c4db83a2de4dc8ace5b3bd5adddbe6.png
[20180520203228928]: /images/20220524/86a817076c35461c8aa533128054b1b0.png
[20180520203419228]: /images/20220524/6ee7b661f8424e40bee477345ef0f88c.png
[20180520203734912]: /images/20220524/45bff9bb977543dbbd81f52da2da4d65.png
[20180520204804312]: /images/20220524/2ea3cb1f3dbc40b2aa3dec8130092c69.png
[20180520210036293]: /images/20220524/7039d17f06994ac4b7a5e460effdd3ba.png
[20180520210145173]: /images/20220524/0eebe243c3454d7080920524065b3240.png
[20180520211042421]: /images/20220524/b975154042874b0d8c9856584dfe4991.png
[20180520211414432]: /images/20220524/72bf2cdcd04e4f358a35301d5ca79d58.png
[20180520211731891]: /images/20220524/9f865300d52b4d1f90c6df5641e9c9dc.png
[20180520214756681]: /images/20220524/37b8cb5d22c045f0bee8c8060b6d7f6a.png
[20180520214853308]: /images/20220524/39e2e5a4cc884d1bb9d72cb822c86cef.png
[2018052021504574]: /images/20220524/0b855f7715ea463faa1f506351cec752.png
[20180520214948247]: /images/20220524/bd48df038eff4eeeb9844cb49922e69d.png
[20180520215302515]: /images/20220524/99c855f0cd524128b39b49b3af72845d.png
[20180520221603427]: /images/20220524/2f06fd4da04f43b18e332770dd218f0e.png
[20180520221534428]: /images/20220524/7eda2607f0274918b9daed3d669e327b.png