vue父组件异步获取动态数据传递给子组件 获取不到值的问题已完美解决 附demo

前几天遇到一个问题,在父组件中使用axios获取异步数据传给子组件,但是发现子组件在渲染的时候并没有数据,在created里面打印也是空的,结果发现一开始子组件绑定的数据是空的,在请求数据没有返回数据时,子组件就已经加载了,并且他绑定的值也是空的,问题找到了,怎么解决那?有两种方法解决,请看下面代码。

方法一、

开始的时候让子组件隐藏,然后等数据返回的时候,让子组件显示。
<template>
  <div class="list">
    <ul v-if="list.length != 0">
      <li v-for="(item,index) in list" :key="index"</li>
    </ul>
  </div>
</template>
<script>
export default {
  props:['getList'], //接收一个数组
    data(){
      return {
        list: []
      }
    },
    watch:{   // 使用监听的方式,监听数据的变化
      getList(val){
        this.list = val;
      }
    }
}
</script>
不过这样方式不太合适,有bug,比如我点击一个按钮去获取数据,然后在弹框里面展示数据,弹框是一个子组件,在获取数据的这段过程有可能几百毫秒,也有可能十秒或者更长时间,难道我要在点击按钮过十秒才让弹框显示吗?这这这绝对不行,推荐使用方法二

方法二、 推荐使用

大概逻辑:使用vuex全局状态管理,其实简单,利用vuex的辅助函数(mapState,mapMutations)mapState是将state里面的数据映射到计算中(computed),mapMutations也是类似,把vuex中mutations的方法映射到组件里面,就可以在组件里面直接使用方法了,在vuex中使用异步(actions)去掉用接口,然后在接口成功的函数里面取触发同步(mutations)里面的方法,把得到数据传给mutations里面的方法里并且给state里面的属性赋值,然后就可以在子组件中使用computed计算中去获取数据并且渲染到页面上,其实说的有点绕( -_-"),但是看代码就明白了 。
vuex / index.js
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('这里是方法名')
父组件 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>

image.png

推荐阅读更多精彩内容

  • ## 框架和库的区别?> 框架(framework):一套完整的软件设计架构和**解决方案**。> > 库(lib...
    Rui_bdad阅读 2,627评论 1 4
  • vue概述 在官方文档中,有一句话对Vue的定位说的很明确:Vue.js 的核心是一个允许采用简洁的模板语法来声明...
    li4065阅读 6,770评论 0 25
  • vuex 场景重现:一个用户在注册页面注册了手机号码,跳转到登录页面也想拿到这个手机号码,你可以通过vue的组件化...
    sunny519111阅读 7,741评论 4 111
  • 理解vue 引用一段官方的原话: Vue.js(读音 /vjuː/,类似于 view) 是一套构建用户界面的渐进式...
    绰号陆拾柒阅读 2,203评论 3 6
  • 有一句话叫做:好的爱情是你通过一个人看到整个世界,而坏的爱情是你为了一个人舍弃世界。 好久之前我以为只是一句“嗯,...
    东城LEO阅读 293评论 0 1
  • 我是郑宏鹏,樊登读书会隰县分会会长,每天一篇文章之090。 我们来看六条爻辞,六条爻辞里都有“蹇”字,同时“来”字...
    道法自然_5c8c阅读 642评论 0 0
  • 这几天都在打羽毛球,跑步就暂搁浅了。 群组活动的确比单打独斗要有意思多了。 尤其是找到自己恰好又喜欢运动上。 羽毛...
    诸葛兔阅读 188评论 0 1
  • 文/苏怀亮 把你对我说过的话 写在我的肺叶 用岁月的线装订成册 然后 腾空两个心室 存放 多年以后 在我的坟头 每...
    苏怀亮文字阅读 177评论 0 0
  • 包子今天跟我讲述在幼儿园中午睡觉的时候,他躺床上用脚(跺床)当!当!当!然后阿姨生气了说:“小朋友们在睡觉,你(用...
    J莹莹阅读 104评论 0 0