vue父組件數據改變，子組件數據並未發生改變（那是因為你沒寫監聽）附帶子組件的寫法

 

下面的代碼有

 

 

 

 

 父組件有三個按鈕，年、月、日 點擊之后父組件的數據發生改變，子組件卻沒改變，打印接受的數據，除了第一次其他都沒打印，那是因為你沒有寫監聽

<template>
  <div class="left_two_middle">
      <ul class="title margin-top">
        <li>排名</li>
        <li v-if="area">地區</li>
        <li v-if="travel">出行方式</li>
        <li>出游人數</li>
        <li>占比</li>
      </ul>
       <el-scrollbar style="height:100%">
      <ul class="title" v-for="(item,index) in items">
        <li>{{index+1}}</li>
        <li v-if="item.touristCity">{{item.touristCity}}</li>
        <li v-if="item.travelName">{{item.travelName}}</li>
        <li v-if="item.scenicName">{{item.scenicName}}</li>
        <li v-if="item.touristProvince">{{item.touristProvince}}</li>
        <li v-if="item.touristCountry">{{item.touristCountry}}</li>
        <li>{{item.num}}</li>
        <li>
          <el-progress :percentage="Number((item.pro*100).toFixed(2))"
                       :color="index<6 ? 'rgb(254,203,24)':'rgb(0,181,255)'"></el-progress>
        </li>
      </ul>
    </el-scrollbar>
  </div>
</template>

<script>
export default {
  name: "myTable",
  props:{
    dataSource:{
        type:Array
    },
    travel:{
      type:Boolean,
      default:false
    },
    area:{
      type:Boolean,
      default:true
    }
  },
  data() {
    return {
      items: []
    };
  },
  methods: {},
  mounted() {
//      console.log(this.dataSource,'父傳過來的數據')
    this.items=this.dataSource
  },
  watch: {
    dataSource: {
      immediate: true,    // 這句重要
      handler (val) {
          this.items=val
      }
    }
  }

};
</script>
<style scoped lang="less">
  .left_two_middle {
    width: 100%;
    height: 80%;
    .title {
      font-size: 12px;
      line-height: 25px;
      padding-right: 15px;
      padding-left: 5px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      li {
        text-align: center;
        list-style: none;
        padding: 3px 0;
        color: white;
      }
      li:first-child {
        width: 10%;
      }
      li:nth-child(2) {
        width: 30%;
      }
      li:nth-child(3) {
        width: 25%;
      }
      li:last-child {
        width: 35%;
      }
    }
  }
</style>
<style>
  .el-scrollbar__wrap{
    overflow-x: hidden;
  }
  .el-progress {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    line-height: 1;
  }
  .el-progress-bar {
    padding-right: 30px;
    width: 85%;
  }
  .el-progress__text {
    font-size: 12px !important;
    color: #fff;
  }
</style>

 

 

完整代碼

父子組件傳遞數組，created中調接口獲取數據，然后賦值，然后子組件收到的卻是空數據why  因為你還沒獲取到數據，組件都渲染了，所以組件加個v-if='this.arr.length>0'就搞定；如下

 

父組件的寫法：一定要v-if,不然子組件已經渲染了，卻沒有數據