vue/uni-app 父組件異步獲取動態數據傳遞給子組件 獲取不到值

問題：

vue 父組件異步請求獲取數據，在請求數據沒有返回數據時，子組件就已經加載了，並且它綁定的值也是空的

解決方法（兩種）：

方法一、

讓子組件條件渲染，數據渲染完成后才渲染子組件

<!-- 父組件中 條件渲染子組件prizeRoll -->
<template>
  <view>
    <block v-if="flag">
      <prizeRoll :lists="rankList" :listNum="5"></prizeRoll>
    </block>
    <view>
</template>

<script>
import prizeRoll from '../../components/prize-info/prize-info.vue'
export default {
  components: { prizeRoll },
  data() {
    return {
      rankList: [],
      flag: flase,
    }
  },
  methods: {
    // 異步請求數據
    ranking() {
      this.$api('gonggao.ranking').then((res) => {
        this.rankList = res.data
        // 數據渲染完成后，將flag值改為true
        this.flag = true
      })
    },
  },
  onLoad() {
    this.ranking()
  },
}
</script>

方法二、

大概邏輯：使用vuex全局狀態管理,其實簡單，利用vuex的輔助函數（mapState，mapMutations）mapState是將state里面的數據映射到計算中（computed），mapMutations也是類似，把vuex中mutations的方法映射到組件里面，就可以在組件里面直接使用方法了,在vuex中使用異步（actions）去掉用接口，然后在接口成功的函數里面取觸發同步（mutations）里面的方法,把得到數據傳給mutations里面的方法里並且給state里面的屬性賦值，然后就可以在子組件中使用computed計算中去獲取數據並且渲染到頁面上

vuex / index.js

<script>
import Vue from 'vue'
import Vuex from 'vuex'
import axios from 'axios'
Vue.use(Vuex)
export default new Vuex.Store({
    //定義初始數據
    state: {
        title: '',
        list: [],
        isShow: false
    },
    //同步的方法
    mutations: {
        //向state 里面設置數據
        changeListMutation(state, list) {
            state.list = list
        },
        //在list.vue里面點擊下拉選項的時候觸發 給state.title賦值
        changeTitleMutation(state, title) {
            state.title = title
        },
        //selectinput.vue里面點擊input的時候觸發 給state.isShow賦值
        toggleShow(state, isShow) {
            state.isShow = isShow
        }
    },
    //異步的方法
    actions: {
        //在list.vue里面created生命周期里面觸發
        getListAction({ commit }) {
            axios.get('/mock/5afd9dc0c088691e06a6ab45/example/dataList')
                .then((res) => {
                    commit('changeListMutation', res.data) //調用mutations下面的changeListMutation方法並且傳值過去
                })
                .catch((error) => {
                    console.log(error)
                })

        }
    }
})
// 觸發異步里面的方法是用 this.$store.dispatch('這里是方法名')
// 觸發同步里面的方法是用 this.$store.commit('這里是方法名')
</script>

父組件 select.vue

<template>
  <div class="select">
    <div class="wrap">
        <selectInput></selectInput>
        <list></list>
    </div>
  </div>
</template>
<script>
  // 引入子組件 
  import selectInput from '@/components/selectInput'  
  import list from '@/components/list'
  export default {
    components:{   //加載子組件
      selectInput,
      list
    },
  }
</script>
<style>
  .select{
    background:#4a56fe;
    width: 400px;
    margin: 100px auto 0;
    padding: 40px;
    border-radius: 10px;
  }
  .wrap{
    background: #e3e5fe;
    border-radius: 10px;
    padding: 40px;
  }
  ul{
    list-style: none;
  }
</style>

子組件 list.vue

該組件就是展示下拉選項，並且調用數據渲染

<template>
  <div class="list">
    <ul>
      <li v-for="(item,index) in list" :key="index" v-show="initShow" @click="changeTitle(item.title)">{{item.title}}</li>
    </ul>
  </div>
</template>

<script>
    import {mapState,mapMutations} from 'vuex'  // 將vuex中的state數據和mutations中的方法映射到組件中
    export default {
        //vue 生命周期（created）在實例創建之后，在數據初始化之前被調用
        created(){  
            this.$store.dispatch('getListAction')  //調用vuex 中的 getListAction異步方法
        },
        //計算state數據
        computed:{
            ...mapState({
              list:'list',
              initShow:'isShow'
            })
        },
        methods:{
            changeTitle(title){
              this.$store.commit('changeTitleMutation',title)
              this.$store.commit('toggleShow',!this.initShow)
            }
        }
    }
</script>
// 觸發異步里面的方法是用 this.$store.dispatch('這里是方法名')
// 觸發同步里面的方法是用 this.$store.commit('這里是方法名')

<style>
  .list{
    padding: 10px 0;
    text-align: center;
  }
  li{
    line-height: 30px;
    height: 30px;
    border-radius: 15px;
    cursor: pointer;
    color:#535353;
  }
  li:hover{
    background: #ff705b;
    color: #fff;
  }
</style>

子組件 selectinput.vue

該組件展示選中的數據

<template>
  <div class="inputBox">
    <input type="text" readonly :value="getTitle" @click="toggleShow" placeholder="你喜歡什么">
  </div>
</template>

<script>
export default {
  computed:{
    // 獲取vuex中的state數據並賦值綁定到 value上面  computed 里面的方法名其實就是相當於 data里面的數據，可以用this.getTitle 去訪問
    getTitle(){ 
      return this.$store.state.title
    },
    // 初始化控制下拉選項顯示隱藏的狀態，如果isShow是false 則不限是下拉菜單，默認是false
    initShow(){
        return this.$store.state.isShow
    }
  },
  methods:{
    //點擊input的時候調用該方法，這個方法去觸發mutations下面的toggleShow，去改變isShow的狀態，默認是isShow等於false, 然后在點擊的時候去改變isShow 等於true ,  !this.initShow就是true，如果是true的話，下拉選項才能出來,並將改變過后的值傳給toggleShow方法，去給vuex/store.js 里面的state.isShow賦值。
    toggleShow(){
      this.$store.commit('toggleShow',!this.initShow)
    }
  }
}
</script>

<style>
input{
  outline: none;
  width: 100%;
  height: 40px;
  line-height: 40px;
  border-radius: 10px;
  border: 1px solid #d3d3d3;
  text-indent: 20px;
  color: #535353;
}
</style>

轉載自：https://www.jianshu.com/p/4450b63a27fe