Vue pass at the same level component value ($ emit, $ on use)

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div id="app">
            <dom-a></dom-a>
            <dom-b></dom-b>
            <dom-c></dom-c>
        </div>
        <script type= "text / JavaScript" the src = "../ JS / vue.min.js" > </ Script > 
        < Script type = "text / JavaScript" > 
            var the Event =  new new Vue (); 

            var A = { 
                Data () { 
                    return { 
                        a: ' I is a component of the data ' 
                    } 
                }, 
                Template: ` 
                    < div > 
                        < span > I component data a -> {{a}} < / span>
                        <type INPUT = " Button "   value =  " the data to the A C ' @click =  ' Send '/ > 
                    < / div> 
                `, 
                Methods: { 
                    Send () { 
                        // $ EMIT ( "event name", data) 

                        / / the this $ EMIT (). 
                        the console.log ( the this ); 
                        the Event $ EMIT (. ' A-MSG ' , the this II.A); 

                    } 
                } 
            }; 
            var B= { 
                Data () { 
                    return { 
                        b: ' I data b components ' 
                    } 
                }, 
                Template: ` 
                    < div > 
                        < span > I data A component -> {{b}} < / span> 
                        < INPUT type = " Button "   value =  ' the B data to C ' @click =  ' Send ' / > 
                    < / div>
                 `,
                Methods: { 
                    Send () { 
                        // $ EMIT ( "event name", data) 
                        // . EMIT the this $ () 
                        the console.log ( the this ); 
                        the Event $ EMIT (. ' B-MSG " , the this .B); 
                    } 
                } 
            }; 

            var C = { 
                Data () { 
                    return { 
                        A: '' , 
                        B: '' 
                    } 
                }, 
                Template: `
                     < div >
                         < H3 > I C component < / H3> 
                        < span > data receive A component is: {{A}} < / span> 
                        < br / > 
                        < span > data received B component is: {{b }} < / span> 
                    < / div> 
                `, 
                Mounted () { 
                    // the received data in the a 

                    // $ ON ( 'event name', Fn (a)) 
                    the event. $ ON ( ' a-MSG ' , ( A) => {
                         the this .a = A; 
                    }); 
                    // receiving data A in 
                    the Event $ ON (. ' B-MSG ' , (B) => {
                         the this .B = B; 
                    }); 
                }, 
            } 
            new new Vue ({ 
                EL: ' #app ' , 
                Components: { 
                    ' DOM-A ' : A,
                     ' DOM-B ' : B,
                     ' DOM-C ' : C 
                } 
            })
        </script>
    </body>
</html>
Vue pass at the same level component value ($ emit, $ on use)

Guess you like
