Vue 组件&组件之间的通信 之 子组件向父组件传值

Posted jiguiyan

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue 组件&组件之间的通信 之 子组件向父组件传值相关的知识,希望对你有一定的参考价值。

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

使用步骤:

定义组件:现有自定义组件com-a、com-b,com-a是com-b的父组件;

准备获取数据:父组件com-a要获取子组件data中的height属性;

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

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

在父组件data定义height属性; 在父组件中实现getData(height)方法,方法参数是子组件传递的数据,例如这里直有一个height,然后为this.height赋值; 赋值完毕后就可以使用了;

 

初始时在子组件中定义width和height

 

通过一个button来进行实现子组件向父组件进行传值

技术图片

 

 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>子组件向父组件传值</title>
    <script type="text/javascript" src="../js/vue.js" ></script>
    </head>
    <body>
        <div>
            <father-component ></father-component>
            </div>
    </body>
    <template id="father-template">
        <div>
        <h2> 父组件</h2>
        myData:<span>{{name}},
            {{id}},
            {{user.username}},{{age}}
        </span><br />
            childData:<span> width:{{width}}</span><br /><span>height:{{height}}</span>
        
        <hr />
      <child-component  :id=id :age=age @sent-event=getData></child-component>    
        </div>
    </template>
    <template id="child-template">
        <div>
            <p> 子组件</p>
            fatherData:<span >{{name}},{{id}},{{user.username}},{{age}}</span><br />
            myData:<span> width:{{width}}</span><br /><span>height:{{height}}</span><br />
            <button @click="setData">向父组件传送数据</button>
            
        </div>
</template>
    <script>
        
        
        new Vue({
            
            data:{
            
        },
        
            components:{
                    "father-component":{
                        
                        methods:{
            
            getData(width,height){
                this.width=width;
                this.height=height;
            }
        },
                        data(){
                            return{
                                    id:"01",
                                name:perfect,
                                
                                user:{
                                
                                    username:博客园---perfect*,
                                    password:123123
                                    
                                },
                                age:18,
                                width:0,
                                height:0
                            }
                        },
                    
                        template:#father-template,
                        
                        components:{
                            "child-component":{
                                
                                methods:{
                                    setData(){
                                        console.log(this);//这里的this指的是child-component实例
                                        this.$emit(sent-event,this.width,this.height);
                                    }
                                },
                                data(){
                                    
                                    return{
                                        width:100,
                                height:50
                                    }
                                },
                                
                                
                                template:#child-template,
                            
                            
                            
                            
                            props:{
                                
                                name:{
                                    type:String,
                                    //required:true,//必须进行传值
                                    
                                    default:perfect*//定义一个默认值
                                },
                                id:[Number,String],
                                   user:{
                                       type:Object,
                                       default:function(){
                                           return {username:perfect***,password:123123}
                                       }
                                   },
                                   
                                   age:{
                                       type:Number,
                                   validator: function (value) {
                                       return value>=0;
                                   }
                                       
                                       
                                   }
                            }
                            }
                        },
                        
                        
                        
                    }
                }
                
            
            
        }).$mount(div);
    </script>
</html>

 

以上是关于Vue 组件&组件之间的通信 之 子组件向父组件传值的主要内容,如果未能解决你的问题,请参考以下文章

VUE:组件与组件之间的通信

VUE6.组件通信父组件向子组件传值

VUE6.组件通信父组件向子组件传值

12.组件化开发2-非父子组件之间通信-祖先和后代之间的通信

Vue组件之间数据交互与通信

Vue.js组件之间的通信