[聚合文章] vue.js之数据传递和数据分发slot

JavaScript 2018-01-20 15 阅读

一、组件间的数据传递

  1.父组件获取子组件的数据  

    *子组件把自己的数据,发送到父级

    *vm.$emit(事件名,数据);

    *v-on: @

  示例用法:当点击send按钮的时候,“111”变成“我是子组件的数据”

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>父级获取子级的数据</title>    <script src="bower_components/vue/dist/vue.js"></script>    <style>    </style></head><body><div id="box">    <aaa>    </aaa></div><template id="aaa">    <span>我是父级 -> {{msg}}</span>    //自动调用get方法,@child-msg和下面的this.$emit('child-msg',this.a)相对应    <bbb @child-msg="get"></bbb></template><template id="bbb">    <h3>子组件-</h3>    <input type="button" value="send" @click="send"></template><script>    var vm=new Vue({        el:'#box',        data:{            a:'aaa'        },        components:{            'aaa':{                data:function(){                    return {                        msg:111,                        msg2:'我是父组件的数据'                    }                },                template:'#aaa',                methods:{                    //这里的msg实际上就是子组件传递给父组件的数据                    get:function(msg){                        this.msg=msg;                    }                },                components:{                    'bbb':{                        data:function(){                            return {                                a:'我是子组件的数据'                            }                        },                        template:'#bbb',                        methods:{                            send:function(){                                this.$emit('child-msg',this.a);                            }
                

注:本文内容来自互联网,旨在为开发者提供分享、交流的平台。如有涉及文章版权等事宜,请你联系站长进行处理。