原理:

在父组件中使用axios获取异步数据传给子组件,但是发现子组件在渲染的时候并没有数据,在created里面打印也是空的,结果发现一开始子组件绑定的数据是空的,在请求数据没有返回数据时,子组件就已经加载了,并且他绑定的值也是空的

使用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)
}) }
}
})
父组件 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>

vue父组件异步获取动态数据传递给子组件获取不到值的更多相关文章

  1. Vue等待父组件异步请求回数据'后'传值子组件

    问题: 让子组件在父组件有哪个数据的时候再渲染, 解决方案: 可以在父组件上加一个判断条件, 举例说明: <a-component :opt="opt" v-if=" ...

  2. Vue2.x中的父组件数据传递至子组件

    父组件结构 template <template> <div> <v-girl-group :girls="aGirls"></v-gir ...

  3. 关于Vue父组件把异步获取的数据传给子组件的问题

    由于父组件中的数据是异步获取的,而子组件在一开始便会渲染,所以会造成子组件渲染完成后,数据还未获取到的情况 这里有一个简单的解决方案:在子组件渲染前,判断父组件数据是否获取完成,数据获取完成后再渲染子 ...

  4. vue 父组件中的数据如何传递给子组件

    父组件:<template> <div id="app"> <img src="./assets/logo.png"> &l ...

  5. vue教程3-05 vue组件数据传递、父子组件数据获取,slot,router路由

    vue教程3-05 vue组件数据传递 一.vue默认情况下,子组件也没法访问父组件数据 <!DOCTYPE html> <html lang="en"> ...

  6. vue 父组件主动获取子组件的数据和方法 子组件主动获取父组件的数据和方法

    Header.vue <template> <div> <h2>我是头部组件</h2> <button @click="getParen ...

  7. Vue把父组件的方法传递给子组件调用(评论列表例子)

    Vue把父组件的方法传递给子组件调用(评论列表例子) 效果展示: 相关Html: <!DOCTYPE html> <html lang="en"> < ...

  8. vue父组件数据改变,子组件数据并未发生改变(那是因为你没写监听)附带子组件的写法

    下面的代码有 父组件有三个按钮,年.月.日 点击之后父组件的数据发生改变,子组件却没改变,打印接受的数据,除了第一次其他都没打印,那是因为你没有写监听 <template> <div ...

  9. vue.js组件之j间的通讯一 子组件接受父祖件数据

    Vue2.0的三种常用传值方式.父传子.子传父.非父子组件传值 在Vue的框架开发的项目过程中,经常会用到组件来管理不同的功能,有一些公共的组件会被提取出来.这时必然会产生一些疑问和需求?比如一个组件 ...

随机推荐

  1. JWT的实现原理

    前言最近在做一个python项目的改造,将python项目重构为java项目,过程中遇到了这个知识点,觉得这个蛮实用的,所以下班后回来趁热打铁写下这篇总结,希望后面的人能够有所借鉴,少走弯路. 一.优 ...

  2. OUTLOOK、foxmail等无法直接打开邮件中的超级链接问题

         部分电脑,在OUTLOOK或Foxmail收到隔离邮件通知时,点击发送或删除时,提示“一般性错误,*******************,找不到应用程序”.或打开其它HTML格式的邮件正文中 ...

  3. 2019JAVA第十次实验报告

    Java实验报告 班级 计科二班 学号 20188442 姓名 吴怡君 完成时间 2019.11.15 评分等级 实验代码 package Domon9; import java.awt.Font; ...

  4. spring boot-5.配置文件注入

    配置文件注入这一部分内容主要有以下几点内容: 1.全局配置文件值注入 2.自定义配置文件值注入 3.自定义的Spring 配置文件生效 (1)首先介绍全局配置文件的值注入,全局配置文件值注入有两种方式 ...

  5. 【转】iptables命令、规则、参数详解

    表    (table)包含4个表:4个表的优先级由高到低:raw-->mangle-->nat-->filterraw---RAW表只使用在PREROUTING链和OUTPUT链上 ...

  6. jmeter强大的扩展插件!!

    jmeter4.0以上版本,如jmeter5.1.1版本的集成插件,只需要在官网下下载“plugins-manager.jar”包,放在jmeter安装路径的lib/ext目录下即可使用. (但该ja ...

  7. concat()用法

       SELECT school_code,`name`,phone from student WHERE login_name REGEXP 'ning$'LIMIT 10; concat() SE ...

  8. drf三大认证解析

    目录 三大认证 认证模块: 权限模块 频率模块 RABC author组件 认证权限六表. Content_type 认证与权限工作原理+自定义认证类 自定义权限类 admin关联自定义用户表 前后台 ...

  9. 使用CXF开发WebService程序的总结(五):基于Map数据类型处理的的客户端和服务端代码的编写

    1. 首先我们按照List或数组等处理方式来处理Map,看看效果 1.1 在服务端的接口中添加以下方法 /** * 查询所有班级信息加上对应的学生列表 * * @return */ public Ma ...

  10. 在docker容器中为elasticsearch配置跨域访问

    一.在docker容器中进入elasticsearch对应的容器 docker exec -it [容器名] /bin/bash 二.安装vim编辑器 因为我们需要更改配置文件,安装过的朋友就不用安装 ...