如图: 需求分析
父组件是页面, 显示表格数据, 子组件是一个功能和信息栏, 主要是添加信息的表单以及记录表格数据条数子组件如何获取父组件数据条数呢?
使用 computed 计算数据长度
- computed:{
- total(){
- let THIS=this;
- let totalList=THIS.todo.length;// 获取数据长度
- return totalList;
- },
- noFinsh(){
- let THIS=this;
- let count=0;
- THIS.todo.forEach(item=>{
- if(item.status==0){
- count+=1;
- }
- });
- return count;
- }
- }
组件标签中传值:
<header-info :postChild=this.total:postNoFinsh=this.noFinsh @handleClick=addToTable></header-info>
子组件接收
- props: { // 接收从父组件 (index 页面中 head-info 标签中 postChild 数据)
- postChild: { // 数据格式
- type: Number,
- required: true
- },
- postNoFinsh: {
- type: Number,
- required: true
- }
- },
子组件显示:
- <el-row class=head_row>
- <span > 总事项:</span><span>{{postChild}}</span>
- <span > 未完成事项:</span><span style="color:red">{{postNoFinsh}}</span>
- <span > 总共登入次数:</span><span>{{visitTimes}}</span>
- </el-row>
子组件传值父组件:
子组件主要把表单数据传递给父组件, 一般提交后我们需要清空表单数据, 可是这样会导致父组件刚刚添加的数据也被清空, 所以我们可以拷贝一份数据给父组件, 同时将原来表单数据清空
- computed:{
- // 使用计算属性
- formData2(){
- // 拷贝出一份表单数据, 使用拷贝出的数据进行提交
- let newObj=Object.assign({}, this.formData);
- return newObj;
- }
- },
提交数据:
- add() {
- debugger;
- this.formData2.date = getYMDdate(this.date);
- /* 注意使用父子组件通过 $emit 传数据依然是一个双向绑定过程
- 提交之后如果后面直接清空数据会再次触发数据的改变, 导致父组件表格数据也为空
- */
- // 表单验证
- if (isInt(this.formData2.importantStar)) {
- this.$emit(handleClick, this.formData2);
- this.date = ;
- this.formData.importantStar = ;
- this.formData.text = ;
- } else {
- alert(请输入整数);
- }
- },
来源: http://www.bubuko.com/infodetail-2513839.html