Vue_(组件通讯)子组件向父组件传值

 

 

　　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函数在子组件中已经绑定

<button @click="sendData">向父组件发送数据</button>

 

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

<child-component  :id="id" :age="age" @send-event="getData"></child-component>

 

    <template id="father-template">
        <div>
            <h1>father component</h1>
            myData : 
            <span>
                {{name}} , 
                {{id}} , 
                {{user.username}} , 
                {{age}}
            </span><br />
            childData : 
            <span>
                {{width}},
                {{height}}
            </span><hr />
            <child-component  :id="id" :age="age" @send-event="getData"></child-component>
        </div>
    </template>
    
    <template id="child-template">
        <div>
            <h2>child component</h2>
            fatherData : 
            <span>
                {{name}} , 
                {{id}} , 
                {{user.username}},
                {{age}}
            </span><br />
            myData : 
            <span>
                {{width}},
                {{height}}
            </span><br />
            <button @click="sendData">向父组件发送数据</button>
        </div>
    </template>

 

 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Gary</title>
    </head>
    <body>
        <div id="GaryId">
            <father-component></father-component>
        </div>
    </body>

    <template id="father-template">
        <div>
            <h1>father component</h1>
            myData : 
            <span>
                {{name}} , 
                {{id}} , 
                {{user.username}} , 
                {{age}}
            </span><br />
            childData : 
            <span>
                {{width}},
                {{height}}
            </span><hr />
            <child-component  :id="id" :age="age" @send-event="getData"></child-component>
        </div>
    </template>
    
    <template id="child-template">
        <div>
            <h2>child component</h2>
            fatherData : 
            <span>
                {{name}} , 
                {{id}} , 
                {{user.username}},
                {{age}}
            </span><br />
            myData : 
            <span>
                {{width}},
                {{height}}
            </span><br />
            <button @click="sendData">向父组件发送数据</button>
        </div>
    </template>

    <script type="text/javascript" src="../js/vue.js" ></script>
    <script type="text/javascript">
    
        new Vue({
            data : {
                
            },
            components : {
                "father-component" : {
                    methods : {
                        getData(width, height){
                            this.width = width;
                            this.height = height;
                        }
                    },
                    data(){
                        return {
                            id : '01',
                            name : 'Gary',
                            user : {
                                username : 'userGary',
                                password : 'pw123'
                            },
                            age : 18,
                            width : 0,
                            height : 0
                        }
                    },
                    template :  "#father-template",
                    components : {
                        "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;
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }).$mount("#GaryId");
    
    </script>
</html>
Gary_childToFather.html

 

posted @ 2019-03-17 12:59  Cynical丶Gary  阅读(456)  评论(0)  编辑  收藏  举报