vue组建中子组件向父组件中传递值

子组件向父组件传值相对来说繁琐，子组件中需要在方法中使用$emit向父组件自定义事件对应的方法传值，父组件需要在自定义对应的方法中接收子组件传来的值

$emit接收两个参数：

参数1：父组件自定义事件

参数2：要传递的值

用伪代码表示一下流程如下：

子组件中

data中：

info:'子组件内容'

template中：



methods中：

Pass:function(){

this.$emit('parent_event', this.info)

}

父组件中

data中

msg:''

template中

{{msg}}

<子组件 v-on:parent_event="Receive" />

methods中：

Receve:function(val){

this.msg = val

}

整体实例代码如下：

    
    
    
    
    



    

        

            

                

                    
APP父组件
                
                

                    

                        
父组件接收子组件传来的值
                        

                            子组件发来的信息：{{son_info}}
                    
                    

                        

                            
                            
                        
                        

                            
                            
                        
                        

                            
                            
                        
                    
                
            
        
    

效果图如下

image.png