Use vue Father Sun components by value ($ attr and $ listeners) of

Parent component

<Template> 
     <div> 
         <! - the values to the sub-component sub-assemblies can get the value you want you can also ignore the need to pass out the value grandson components -> 
         <! - at the same time gets passed by $ listeners of grandson component event (@ test2) and $ emit transfer subcomponents event ($ test1) -> 
         <child1: child1Info = "child1": child2Info = "child2" @ test1 = "onTest1" @ test2 = "onTest2"> 
         < / Child1> 
     </ div> 
 </ Template> 
 <Script> 
 Import from Child1 './child1' ; 
 Export default { 
     Data () { 
         return { 
             the child1: "hahha" , 
             child2: "asdsdasd" 
         }; 
     },
     components: { Child1 },
     methods: {
         onTest1(msg) {
             console.log('test1 running...',msg);
         },
         onTest2(msg) {
             console.log('test2 running',msg);
         }
     }
 };
 </script>

Subassembly

<Template> 
     <div class = "Child-. 1"> 
         <P> The props-child1Info: {{child1Info}} </ P> 
         <P> $ attrs: {{$ attrs}} </ P> 
        <HR> 
        <! - binding by $ attrs v-bind properties, grandchildren components as parent component can be directly transferred values (except child1 assembly props declarations) binding properties of the parent component through the Listeners $ v-on components may be obtained came from grandchildren events -> 
        <Child2 the bind-V = "$ attrs" V-ON = "$ the Listeners"> </ Child2> 
    </ div> 
</ Template> 
<Script> 
Import from Child2 './child2'; 
Export default { 
   The props: { 
     child1Info: { 
       type: String, 
       default: '' 
     } 
   }, 
    Data () { 
        return {};
    },
    components: { Child2 },
    mounted() {
        . this $ emit ( 'test1' , ' hee'); 
    } 
}; 
</ Script>

Grandson components

<Template> 
    <div class = "Child-2"> 
        <- parent component values may be obtained by directly transmitted over $ attrs -> 
        <P> $ attrs values: {{$ attrs.child2Info}} < / P> 
        <HR> 
    </ div> 
</ Template> 
<Script> 
Export default { 
    Data () { 
        return {}; 
    }, 
   Mounted () { 
        // event to be transmitted by the parent component EMIT $ 
        the this $ EMIT ( '. test2 ',' ha '); 
    } 
}; 
</ Script>