vue子组件给父组件传值

子组件：

 
 

   
   

    
    

   
   
   
   

    
    

     
     <template>
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
         
     
     <div class="app">
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
            
     
     <input @click="sendMsg" type="button" value="给父组件传递值">
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
         
     
     </div>
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     </template>
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     <script>
     
     
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     export 
     
     default {
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
      
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
         data () {
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
             
     
     return {
    
    
   
   

   
   

    
    

   
   
   
   

    
    
            
     
     //将msg传递给父组件
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
                 msg: 
     
     "我是子组件的msg",
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
             }
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
         },
    
    
   
   

   
   

    
    

   
   
   
   

    
    
     
     
     methods:{
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
              sendMsg(){
    
    
   
   

   
   

    
    

   
   
   
   

    
    
             
     
     //func: 是父组件指定的传数据绑定的函数，this.msg:子组件给父组件传递的数据
    
    
   
   

   
   

    
    

   
   
   
   

    
    
             
     
     this.$emit(
     
     'func',
     
     this.msg)
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
              }
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
          }
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     }
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     </script>
    
    
   
   
 
 

子组件通过this.$emit()的方式将值传递给父组件

注意：这里的func是父组件中绑定的函数名

父组件：

 
 

   
   

    
    

   
   
   
   

    
    

     
     <template>
    
    
   
   

   
   

    
    

   
   
   
   

    
    
    
     
     <div class="app">
    
    
   
   

   
   

    
    

   
   
   
   

    
    
        
     
     <child @func="getMsgFormSon">
     
     </child>
    
    
   
   

   
   

    
    

   
   
   
   

    
    
    
     
     </div>
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     </template>
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     <script>
     
     
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     import child 
     
     from 
     
     './child.vue'
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     export 
     
     default {
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
         data () {
    
    
   
   

   
   

    
    

   
   
   
   

    
    
        
     
     return {
    
    
   
   

   
   

    
    

   
   
   
   

    
    
            
     
     msgFormSon: 
     
     "this is msg"
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
             }
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
         },
    
    
   
   

   
   

    
    

   
   
   
   

    
    
    
     
     components:{
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
             child,
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
         },
    
    
   
   

   
   

    
    

   
   
   
   

    
    
    
     
     methods:{
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
                 getMsgFormSon(data){
    
    
   
   

   
   

    
    

   
   
   
   

    
    
                
     
     this.msgFormSon = data
    
    
   
   

   
   

    
    

   
   
   
   

    
    
                
     
     console.log(
     
     this.msgFormSon)
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
                 }
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
         }
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     }
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     </script>