Data acquisition and active parent component and subassembly methods subassembly and data acquisition method of the parent active components

< Template > 
    <-! All content to be the root contains up -> 
    < div the above mentioned id = "Home" > 
    
        < v-header ref = "header" > </ v-header > 

        < HR > 
         Home Components    

         < the Button @click = "getChildData ()" > acquired data and methods subassembly </ Button > 

    </ div > 

</ Template > 


< Script > 


/ * 
parent component subassembly to pass value 

    when the component subassembly 1. parent call tie dynamic attributes given 
        <v-header:title="title"></v-header>

    2, received by a parent component subassembly which props pass over the data 
        props: [ 'title'] 



        props: { 

            'title': String       
        } 

    3. used directly in the subassembly which 



parent component and active data acquisition method subassemblies: 

    1. when a call subassembly defined REF 

        <V REF-header = "header"> </ V-header> 

    2. within parent components inside through 

        this. $ refs.header. attribute 

        this. $ refs.header. method 





sub active components and data acquisition method of the parent components:   


        the this $ parent data.. 

        the this method $ parent.. 



* / 

    Import from Header ' ./Header.vue ' ; 

    Export default { 
        data () { 
            return {                
               MSG:'I is a home component ' , 
               title: ' Home 111 ' 
            } 
        }, 
        Components: { 

            ' V-header ' : Header 
        }, 
        Methods: { 

            run () { 

                Alert ( ' I run method Home component " ); 
            }, 
            getChildData () { 

                // parent component and active data acquisition method subassemblies: 
                // Alert ($ refs.header.msg the this.); 

                the this $ refs.header.run ();. 
            } 
        } 


    } 

</ Script > 

< stylelang = "SCSS" scoped > 

    / * CSS local scope scoped * / 

    H2 { 

        Color : Red
     } 

    
</ style >

< Template > 


    < div > 
    
        < H2 > I head assembly </ H2 > 

      
          < Button @click = "getParentData ()" > acquired data and methods subassembly </ Button > 

       
    </ div > 
</ Template > 




< Script > 
    
Export default { 


    Data () { 

        return { 
            MSG: ' MSG subassembly ' 
        } 
    }, 
    Methods:{
       
            run(){

                alert('I run method subassembly ' ) 
            }, 
            getParentData () { 


                / * 
                subassembly and data acquisition method of the parent active components:   


                .. This $ parent data 

                .. This $ parent methods 

                
                * / 
                // Alert (the this $ parent. a .msg); 

                // the this $ parent.run ();. 
            } 
    } 
    
} 

</ Script >