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

vue-父子组件

时间:2017-08-24 01:06:16      阅读:218      评论:0      收藏:0      [点我收藏+]

标签:get   char   class   round   number   src   log   eth   value   

1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="bower_components/vue/dist/vue.js"></script>
    <style>
    </style>
</head>
<body>
    <div id="box">
        <aaa>
        </aaa>
    </div>

    <script>
        var vm=new Vue({
            el:#box,
            data:{
                a:aaa
            },
            components:{
                aaa:{
                    template:<h2>我是aaa组件</h2><bbb></bbb>,
                    components:{
                        bbb:{
                            template:<h3>我是bbb组件</h3>
                        }
                    }
                }
            }
        });

    </script>
</body>
</html>

2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="bower_components/vue/dist/vue.js"></script>
    <style>
    </style>
</head>
<body>
    <div id="box">
        <aaa>
        </aaa>
    </div>

    <script>
        var vm=new Vue({
            el:#box,
            data:{
                a:aaa
            },
            components:{
                aaa:{
                    data(){
                        return {
                            msg:我是父组件的数据
                        }
                    },
                    template:<h2>我是aaa组件</h2><bbb></bbb>,
                    components:{
                        bbb:{
                            template:<h3>我是bbb组件->{{msg}}</h3>
                        }
                    }
                }
            }
        });

    </script>
</body>
</html>

3

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="bower_components/vue/dist/vue.js"></script>
    <style>
    </style>
</head>
<body>
    <div id="box">
        <aaa>
        </aaa>
    </div>

    <template id="aaa">
        <h1>11111</h1>
        <bbb :mmm="msg2"></bbb>
    </template>
    <script>
        var vm=new Vue({
            el:#box,
            data:{
                a:aaa
            },
            components:{
                aaa:{
                    data(){
                        return {
                            msg2:我是父组件的数据
                        }
                    },
                    template:#aaa,
                    components:{
                        bbb:{
                            props:[mmm],
                            template:<h3>我是bbb组件->{{mmm}}</h3>
                        }
                    }
                }
            }
        });

    </script>
</body>
</html>

4

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="bower_components/vue/dist/vue.js"></script>
    <style>
    </style>
</head>
<body>
    <div id="box">
        <aaa>
        </aaa>
    </div>

    <template id="aaa">
        <h1>11111</h1>
        <bbb :mmm="msg2" :my-msg="msg"></bbb>
    </template>
    <script>
        var vm=new Vue({
            el:#box,
            data:{
                a:aaa
            },
            components:{
                aaa:{
                    data(){
                        return {
                            msg:111,
                            msg2:我是父组件的数据
                        }
                    },
                    template:#aaa,
                    components:{
                        bbb:{
                            props:[mmm,myMsg],
                            template:<h3>我是bbb组件->{{mmm}} <br> {{myMsg}}</h3>
                        }
                    }
                }
            }
        });

    </script>
</body>
</html>

5.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="bower_components/vue/dist/vue.js"></script>
    <style>
    </style>
</head>
<body>
    <div id="box">
        <aaa>
        </aaa>
    </div>

    <template id="aaa">
        <h1>11111</h1>
        <bbb :mmm="msg2" :my-msg="msg"></bbb>
    </template>
    <script>
        var vm=new Vue({
            el:#box,
            data:{
                a:aaa
            },
            components:{
                aaa:{
                    data(){
                        return {
                            msg:111,
                            msg2:我是父组件的数据
                        }
                    },
                    template:#aaa,
                    components:{
                        bbb:{
                            props:{
                                m:String,
                                myMsg:Number
                            },
                            template:<h3>我是bbb组件->{{mmm}} <br> {{myMsg}}</h3>
                        }
                    }
                }
            }
        });

    </script>
</body>
</html>

6.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</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>
        <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(){
                        return {
                            msg:111,
                            msg2:我是父组件的数据
                        }
                    },
                    template:#aaa,
                    methods:{
                        get(msg){
                            // alert(msg);
                            this.msg=msg;
                        }
                    },
                    components:{
                        bbb:{
                            data(){
                                return {
                                    a:我是子组件的数据
                                }
                            },
                            template:#bbb,
                            methods:{
                                send(){
                                    this.$emit(child-msg,this.a);
                                }
                            }
                        }
                    }
                }
            }
        });

    </script>
</body>
</html>

 

vue-父子组件

标签:get   char   class   round   number   src   log   eth   value   

原文地址:http://www.cnblogs.com/lanlanJser/p/7420926.html

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