Vue组件　　

 

 

 

　　子组件向父组件传值：子组件通过$.emit()方法以事件形式向父组件发送消息传值；

　　使用步骤：

　　　　1、定义组件：现有自定义组件com-a、com-b，com-a是com-b的父组件；

　　　　2、准备获取数据：父组件com-a要获取子组件data中的height属性；

　　　　3、在子组件com-b中，需要用$.emit()方法将数据以事件的形式发送，$.emit('sendData', data, data…)，红色的部分事件名可自定义，数据可传递多个；

　　　　4、在父组件中使用子组件的地方 <com-b @自定义事件名='getData'></com-b> 监听子组件自定义的事件，并且在方法中获取数据；

　　　　5、在父组件data定义height属性；

　　　　6、在父组件中实现getData(height)方法，方法参数是子组件传递的数据，例如这里直有一个height，然后为this.height赋值；

　　　　7、赋值完毕后就可以使用了；

 

　　Learn

　　　　一、子组件向父组件传值

 

　　目录结构

　　

 

 

一、子组件向父组件传值

　　在子组件中初始化数据

　　"child-component" : {                            template : "#child-template",                            methods : {                                sendData(){                                    console.log(this);                                    this.$emit('send-event', this.width, this.height);                                }                            },                            data(){                                return {                                    width : 50,                                    height : 100                                }                            },                            props : {                                name : {                                    type : String,                                    //required : true,                                    default : "Garydef"                                },                                id : [Number, String],                                user : {                                    type : Object,                                    default : function(){                                        return {username : 'lain', password : '123123'};                                    }                                },                                age : {                                    type : Number,                                    validator : function(value){                                        return value >= 0;                                    }                                }                            }                        }

 

　　在子组件中添加<button>按钮，并绑定sendData点击事件，sendData函数在子组件中已经绑定

向父组件发送数据

 

　　父组件中直接获得子组件id和age属性值