首页 > 代码库 > vue教程3-05 vue组件数据传递、父子组件数据获取

vue教程3-05 vue组件数据传递、父子组件数据获取

vue教程3-05 vue组件数据传递

一、vue默认情况下,子组件也没法访问父组件数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="http://www.mamicode.com/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>‘//这里是子组件,是访问不到父组件的数据msg
                        }
                    }
                }
            }
        });

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

技术分享

 

二、数据传递

组件数据传递:    √
1. 子组件获取父组件data
    在调用子组件:
        <bbb :m="数据"></bbb>

    子组件之内:
        props:[‘m‘,‘myMsg‘]

        props:{
            ‘m‘:String,
            ‘myMsg‘:Number
        }
2. 父级获取子级数据
    *子组件把自己的数据,发送到父级

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

    v-on:    @

 

1、子组件获取父组件data

 方法一:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="http://www.mamicode.com/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‘],//my-msg在这里要变成驼峰命名法
                            template:‘<h3>我是bbb组件->{{mmm}} <br> {{myMsg}}</h3>‘
                        }
                    }
                }
            }
        });
    </script>
</body>
</html>

方法二:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="http://www.mamicode.com/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>

 

2、 父级获取子级数据

方法一:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="http://www.mamicode.com/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="http://www.mamicode.com/send" @click="send">
    </template>
    <script>
        var vm=new Vue({
            el:‘#box‘,
            data:{
                a:‘aaa‘
            },
            components:{
                ‘aaa‘:{
                    data(){
                        return {
                            msg:‘我是父组件的数据‘
                        }
                    },
                    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教程3-05 vue组件数据传递、父子组件数据获取