如图：需求分析
父组件是页面，显示表格数据，子组件是一个功能和信息栏，主要是添加信息的表单以及记录表格数据条数。子组件如何获取父组件数据条数呢？
使用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(‘请输入整数‘); ?????????} ?????????????????},
vuejs 父子组件传值实例
原文地址：https://www.cnblogs.com/luojunweb/p/8496288.html