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:"",

                                name:'perfect',

                                user:{

                                    username:'博客园---perfect*',

                                    password:''

                                },

                                age:,

                                width:,

                                height:

                            }

                        },

                        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:,

                                height:

                                    }

                                },

                                template:'#child-template',

                            props:{

                                name:{

                                    type:String,

                                    //required:true,//必须进行传值

                                    default:'perfect*'//定义一个默认值

                                },

                                id:[Number,String],

                                   user:{

                                       type:Object,

                                       default:function(){

                                           return {username:'perfect***',password:''}

                                       }

                                   },

                                   age:{

                                       type:Number,

                                   validator: function (value) {

                                       return value>=;

                                   }

                                   }

                            }

                            }

                        },

                    }

                }

        }).$mount('div');

    </script>

</html>

巴特西

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

最新文章

热门文章

巴特西

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

最新文章

热门文章

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