码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2019-03-17 13:49:44      阅读:165      评论:0      收藏:0      [点我收藏+]

标签:UNC   并且   func   传送门   round   har   one   gif   type   

 

 

  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

 

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

标签:UNC   并且   func   传送门   round   har   one   gif   type   

原文地址:https://www.cnblogs.com/1138720556Gary/p/10545213.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!