vue parent component subassembly to pass values (Method)

<! DOCTYPE HTML > 
< HTML lang = "EN" > 
< head > 
    < Meta charset = "UTF-. 8" > 
    < title > parent component subassembly to pass method </ title > 
    < Script the src = "./ vue2. 6.9.js " > </ Script > 
</ head > 
< body > 
< div the above mentioned id =" App " > 
<-! parent component to child component delivery method, using event binding mechanism v-on when our custom after an event attribute, sub-assemblies will be able to call in some way passed into this method of ->
    <com2 @func= "Show" > </ COM2 > 
</ div > 

< Template ID = "templ" > 
    < div > 
        < h1 of > This is the sub-assembly </ h1 of > 
        < INPUT   type = "Button" value = "This is a subassembly button, click on it to trigger the passed method func " @click =" MyClick " /> 
    </ div > 
</ Template > 
</ body > 
< Script >
    // define a type of component templates literal objects 
    var COM2 = { 
        Template: ' #templ ' , // by specifying a Id, this represents said load going to the id specified in the template element, the structural components as HTML 
       Data () {
             return { 
                sonmsg: { 
                    name: ' John Doe ' , 
                    Age: 18 is 
                } 
            } 
       }, 
        Methods: { 
            MyClick () { 
                // eMIT 'call trigger, transmitting' 
                 the this $ eMIT (. " FUNC " , the this .sonmsg) 

            } 
        } 
    } 

    var VM=  New newVUE ({ 
        EL: ' #app ' , 
        Data: { 
           datamsgFromSon: null , 
        }, 
        Methods: { 
            show (Data) { 
                the console.log ( " calls show a method of assembly of the body of parent ----- " + Data)
                 the this .datamsgFromSon = Data; 
                the console.log (Data) 
            } 
        }, 
        Components: { 
            COM2 
        } 
    }) 
</ Script > 
</ HTML >

Renderings

<! DOCTYPE HTML > 
<HTML lang = "EN" > 
<head> 
    <Meta charset = "UTF-. 8" > 
    <title> Parent group member the method is transmitted to the sub- group members </ title> 
    <Script the src = "./ vue2.6.9.js " > </ Script> 
</ head> 
<body> 
<div ID =" App " > 
<-! parent group member to the sub- group member transmitting method ,Using event tied to a given mechanism v-on when I have a custom -defined aAn event genera after property , then it sub- group member can be via through some of the ways to adjust a transfer feed to the this method the -> 
<COM2 @func = "Show" > </ COM2> 
</ div> 
< Template ID = "templ" >     <div>         <h1 of> which is a sub- group of items </ h1 of>         <INPUT   type = "button" value = " this is a sub- group members in the press button , the point hit it ,Trigger passed over



The func method " @click =" MyClick " /> 
    </ div> 
</ Template> 
</ body> 
<Script> 
// given sense a th literal class type group member templates for object 
var COM2 = { 
        Template : '#templ' , // pass through to specify a th id, represents said going to add contained in this specified id of the template elements within the content , when doing group member HTMLStructure 
Data () { 
            return { 
                sonmsg : { 
                    name : ' Zhang three ' , 
Age : 18 is
 } 
            } 
       } , 
Methods : { 
            MyClick () { 
                // EMIT ' tone with , triggers , hair emission ' 
the this . $ EMIT ( "FUNC " , the this . sonmsg ) 

            } 
        } 
    } 

    var VM = new new Vue ({ 
        EL: '#App' , 
Data : { 
           datamsgFromSon : null,
 } , 
Methods : { 
            show (Data) { 
                Console . Log ( " tune with the parent group member body show a method -----" + Data) 
                the this . DatamsgFromSon Data = ; 
Console . log (Data) 
            } 
        } , 
Components : { 
            COM2
 } 
    }) 
</ Script> 
</ HTML>

vue parent component subassembly to pass values (Method)

Guess you like