Vuejs Parent-Child component value-passing instance

Demand analysis

A parent component is a page that displays tabular data, a function and an information bar, primarily a form for adding information, and a record table data bar count. How does a child component get the number of parent component data bars?

Calculate data length using computed

computed:{Total       () {let        this=this;        Let totallist=this.todo.length;//get the data length        return totallist;       },       Nofinsh () {let        this=this;        Let count=0;        THIS.todo.forEach (item=>{            if (item.status==0) {                    count+=1;            }        });        return count;       }    }

Pass-through values in component labels:

　　

Sub-component receive

props:{//Receive Postchild data from parent component (Head-info tag in index page)        postchild:{//Data format            type:number,            required:true        },        postnofinsh:{            type:number,            required:true        }    },

Sub-components display:

<el-row class= ' Head_row ' >    <span> General matters:</span><span>{{postchild}}</span>    <span> unfinished items: </span><span style= "color:red" >{{postNoFinsh}}</span>    <span> Total login times:</span><span>{{visittimes}}</span>   </el-row>  

Child component pass-through parent component:

The sub-component mainly passes the form data to the parent component, generally we need to clear the form data after submission, but this will cause the parent component to just add the data is also emptied, so we can copy a copy of the data to the parent component, while the original form data is emptied

computed:{        //Use the calculated attribute        formData2 () {            ///Copy out a form data, commit with the copied data to let            newobj=object.assign ({}, This.formdata);            return newObj;        }    ,

Submit data:

Add () {          debugger;          This.formdata2.date=getymddate (this.date);          /* Note that using a parent-child component to pass data through $emit is still a two-way binding process            , and if the subsequent emptying of the data will trigger changes to the data again, the parent Component table data is also empty/          //The form validates          if (Isint ( This.formData2.importantStar) {This            . $emit (' Handleclick ', this.formdata2);                      This.date= ";            This.formdata.importantstar= ";            This.formdata.text= ';          } else{            alert (' Please enter an integer ');}                  ,

　　

　

Vuejs Parent-Child component value-passing instance