08 - 모/자 어셈블리 간의 통신:모/자 어셈블리에서 모/자 어셈블리로 값 전송

  

      
  
    
   
       Vue.component("my-father",{
           template:`
             <div>
               <h1>{{mess}}</h1>
               <my-child @send='rcvMsg'></my-child>
             </div>
           `,
           data:function(){
               return{
                   mess:''
               }
           },
           methods:{
               rcvMsg:function(txt){
                   this.mess=txt
               }
           }
       })
       
       Vue.component('my-child',{
           template:`
                <button @click='sendToFather'> </button>
             `,
           data:function(){
               return{
                   msg:' ， '
               }
           },
           methods:{
             sendToFather:function(){
//                 this.$emit(' ', )
                   this.$emit('send',this.msg)
             }  
           }
       })
       
       
       new Vue({
           el:"#app"
       })
    

   

       
   
    
    
        Vue.component("my-father",{
            template:`
                <div>
                  <h1> </h1>
                  <p> :<b>{{mess}}</b></p>
                  <my-child @send='rcvMsg'></my-child>
                </div>
             `,
            data:function(){
                
                return{
                    mess:''
                }
            },
            methods:{
                rcvMsg:function(txt){
                    this.mess=txt
                }
            }
        })
        
        Vue.component('my-child',{
            template:`
             <div>
                <h1> </h1>
                <input type='text' v-model='msg'> <button @click='sendMsg'> </button>
             </div>
            `,
            data:function(){
                return{
                    msg:''
                }
            },
            methods:{
                sendMsg:function(){
                    this.$emit('send',this.msg)
                }
            }
        })
        
       new Vue({
           el:'#app'
       })
    

   

       
   
    
    
        Vue.component('chat-room',{
            template:`
              <div>
                 <ul>
                    <li v-for="(value,index) in chatcont">{{value}}</li>
                 </ul>
                 <user @send='rcvMsg' userName='jack'></user>
                 <user @send='rcvMsg' userName='rose'></user>
               </div>
            `,
            data:function(){
                return{
                    chatcont:[],
                   
                }
            },
            methods:{
               rcvMsg:function(txt){
                  
                   this.chatcont.push(txt)
               }
            }
        })
        
        Vue.component('user',{
            props:['userName'],
            template:`
             <div>
               <label>{{userName}}</label>
               <input type='text' v-model='msg'>
               <button @click='sendMsg'> </button>
            </div>
            `,
            data:function(){
                return{
                    msg:''
                }
            },
            methods:{
                sendMsg:function(){
                    this.$emit('send',this.userName+":"+this.msg)
                }
            }
        })
       new Vue({
           el:'#app'
       })