vue 父组件向子组件传值,子组件动态获取数据更新

  • 父组件向子组件传值,子组件只要使用props接收即可
<style scope>
    .hide{
        display:none;
    }
</style>
/*父组件*/
<template>
<div class="parent">
    <span v-for="(item,index) in message" @click="clickHandle(index)">{{item.value}}</span>
    <div class="isVisible?'hide':''">
        <child info="parentIndex"></child>
    </div>
</div>
</template>
<script>
import child from './child'
  export default {
    components:{
        child
    },
    data(){
        return {
            isVisible:false,
            message:[
                {'value':'第一行'}, {'value':'第二行'}, {'value':'第三行'}
            ],
            parentIndex:null
        }
    },
    methods:{
        clickHandle(index){
            this.isVisible = true
            this.parentIndex = index
        }
    }
}
</script>

/*子组件*/
<template>
<div>
<div>{{info}}</div>
<div v-for="(item,index) in childData" v-if="childData">
    <span>{{item.value}}</span>
</div>
</div>
</template>
<script>
/*model文件是配置地址url的基础选项*/
import * as model from '../model'
export default{
    props:['info'],
    created(){
        this.getData()
    },
    data(){
        return {
            childData:null
        }
    },
    watch:{
        info:{
            handle(new,old){
                this.getData()
            }
        }
    },
    methods:{
        getData(){
            /*这里写请求数据的方法*/
            //如果从父组件的数据已经得到,但此时无法判断数据和方法是否已经挂载到实例上,如果没写created方法的话
            if(this.info){
                let url = this.info + '.json'
                let childInfo = model.CacheModel.get(url)
                if(childInfo){
                    childInfo.then(res => {
                        this.childData = res.data
                        console.log(res.data)
                    })
                }
            }        
        }
    }
}
</script>
  • 项目中遇到一个问题,需求是当子组件接收到父组件传来的值后,动态请求后台数据获取到后再显示到视图中,且子组件是在点击父组件某一项时才改变其display值为显示的。
  • vue有数据双向绑定机制,所以只考虑怎样动态更新数据即可,也就是什么时候触发子组件定义的根据父组件传递的值来向后台请求数据的方法。
  • 方法:监听父组件传递过来的值,然后执行请求数据方法
  • bug:第一次请求的时候,数据返回特别慢,也可能无法返回数据,而且很有可能会报错超时,原因就是当父组件传递过来的值发生改变时,想要观测数据触发请求方法时,此时无法确定实例是否已经实例化完成也就是是否完成以下的配置:数据观测(data observer),属性和方法的运算,所以无法判断数据和方法是否已经运算完毕
  • 解决方法: created()方法中先执行一次请求数据的方法,确保数据和方法均已运算完毕
  • 可以学习这里: vue生命周期函数

转载于:https://my.oschina.net/yxmBetter/blog/1537009

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值