vue组件父子组件之间传递数据

举个栗子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../Vue.js"></script>
    <template id="tpl1">
        <h3>我是父组件  -->{{msg}}</h3>
        <bbb @child-data="get"></bbb>
    </template>
    <template id="tpl2">
        <input type="button" value="发送" @click="send()">
        <h4>我是子组件  -->{{msg2}}</h4>
    </template>
    <script>
        //子组件取父组件的数据
        window.onload = function () {
            new Vue({
                el:"#div",
                //局部小组件
                components:{
                    'aaa':{
                        data: function () {
                            return {
                                msg:'我是父组件的数据'
                            }
                        },
                        template:'#tpl1',
                        methods: {
                          get: function (m) {
                              this.msg = m;
                          }
                        },
                        components:{
                            'bbb':{
                                data: function () {
                                    return {
                                        msg2: '我是子组件'
                                    }
                                },
                                template:"#tpl2",
                                methods:  {
                                    send:function (){
                                        this.$emit('child-data',this.msg2);
                                    }
                                }
                            }

                        }
                    }
                }
            })
        }
    </script>
</head>
<body>

<div id="div">
    <aaa></aaa>
</div>
</body>
</html>

 

posted @ 2017-07-13 21:58  MeetinApril  阅读(168)  评论(0)  编辑  收藏  举报