Article From:https://www.cnblogs.com/wangyunhui/p/9122336.html

1.The parent component passes the value to the child component:

  Example screenshot:

    

 

  Instance code:

/*Subcomponent code * / //child.vue< template>< div style= "border: 1px solid red; margin: 10px;" >< h2> sub component < /h2>< p> {{name}}< /p>< /div>< /template>< script>Export default {Props:{Name:{/ / type common type: string (String), number (Number), Boolean value (Boole)An), empty (Null) reference type: array (Array), object (Object).In this case, the common type can be changed in the subcomponent and does not affect the values from the parent component that is also called in the other sibling components, but, the value of the reference type, when in the subgroup.When the component is modified, the parent component will be modified. The consequence is that the value of other components that also reference the modification will be modified accordingly. Unless you have special requests to do so, you'd better not do so. * * /Type:String,ReqUire:true,Default: "", / / default valueValidator: function (value) {/ / / validatorReturn value;}},},Data () {Return {Val:this.name}},Mounted () {Console.log (this.name);Console.log (this.val);},}< /script>

  

/*Father component code * /< template>< div class= "hello" >< h1> parent component < /h1>< input v-Model= "MSG" >< Child: name= "MSG" > < /Child>< /div>< /template>≪ script>Import Child from "@/components/child"Export default {Data () {Return {Msg:'Welcome to Your Vue.js App'}},Components:{Child},}< /scripT>

 

 2.The child component passes the value to the parent component:

    Example screenshot:

      

    Instance code:

    

/*Sub component * /< template>< div style= "border: 1px solid red; margin: 10px;" >< h2> subcomponent &lT; /h2>< p> {{val}}< /p>< button @click= "sendMsg" > transmitted to the parent value < /button></div>< /template>< script>Export default {Data () {Return {Val:"Aaaaaa"}},Methods:{SendMsg () {This.$emit ("listen", this.val);},},}< /script>

  

/*The parent component * /< template>< div class= "hello" >< h1> parent component < /h1>< input v-moDel= "MSG" >< child @listen= "show" > < /child>< /div>< /template>< script>Import child from "@/components/child1"Export default {Components:{Child},Data () {Return {Msg:'Welcome to Your Vue.js App'}},Methods:{Show (VAL) {This.msg=val;},},}< /script>

  

In communication, whether the child component passes to the parent component or the parent component passes the value to the subcomponent, they have a common point in which there is an intermediate medium, the child to the parent is a custom event, and the parent of the parent is the attribute in the props. Grasping these two points is good for the father and son communication.(Quote to: https://www.cnblogs.com/daiwenru/p/6694530.html)

      

Similar Posts:

Leave a Reply

Your email address will not be published. Required fields are marked *