vue 父组件向子组件传值,子组件动态获取数据更新
2017-09-13 00:00
746 查看
父组件向子组件传值,子组件只要使用props接收即可
项目中遇到一个问题,需求是当子组件接收到父组件传来的值后,动态请求后台数据获取到后再显示到视图中,且子组件是在点击父组件某一项时才改变其display值为显示的。
vue有数据双向绑定机制,所以只考虑怎样动态更新数据即可,也就是什么时候触发子组件定义的根据父组件传递的值来向后台请求数据的方法。
方法:监听父组件传递过来的值,然后执行请求数据方法
bug:第一次请求的时候,数据返回特别慢,也可能无法返回数据,而且很有可能会报错超时,原因就是当父组件传递过来的值发生改变时,想要观测数据触发请求方法时,此时无法确定实例是否已经实例化完成也就是是否完成以下的配置:数据观测(data observer),属性和方法的运算,所以无法判断数据和方法是否已经运算完毕
解决方法: created()方法中先执行一次请求数据的方法,确保数据和方法均已运算完毕
可以学习这里: vue生命周期函数
<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生命周期函数
相关文章推荐
- 动态创建表格,更新、提交、循环获取表格中各种元素的数据 并转换为JSON,数组的数据格式。
- Vue 父子组件的数据传递、修改和更新
- ECharts图表组件入门教程:如何动态读取数组内的数据至echarts图表且动态更新图表Y轴刻度单位
- vue 后台数据获取与组件渲染、页面刷新数据消失的问题小结
- Android ListView 获取网络上的数据,动态地进行数据更新!
- Vue2.X 通过AJAX动态更新数据
- Vue.js--基于$.ajax获取数据并与组件的data绑定
- 浅谈vue单一组件下动态修改数据时的全部重渲染
- vue-router2.0 组件之间传参及获取动态参数
- vue-router2.0 组件之间传参及获取动态参数
- vue动态组件 互相之间传输数据 和指令的定义
- vue-router2.0 组件之间传参及获取动态参数
- Vue实现调节窗口大小时触发事件动态调节更新组件尺寸的方法
- vue笔记-----简单的vue-resource动态获取数据
- Vue实现调节窗口大小时触发事件动态调节更新组件尺寸
- Vue使用echarts数据动态更新,Y轴刻度固定或者自适应
- Vue.set()动态的新增与修改数据,触发视图更新的方法
- Vue.js学习(五):vue+axios+php+mysql 实现前端界面数据动态更新
- vue+vuex+axio从后台获取数据存入vuex实现组件之间共享数据
- vue-router2.0 组件之间传参及获取动态参数的方法