组件间数据传递

2019-08-14  本文已影响0人  念念碎平安夜

一. 父子组件

1、在一个组件内部定义另一个组件,称为父子组件;

<div id="itany">
    <my-hello></my-hello>
</div>
<template id="hello">
    <div>
        <h3>我是hello父组件</h3>
        <hr>
        <my-world></my-world>
    </div>
</template>
<template id="world">
    <div>
        <h4>我是world子组件</h4>
    </div>
</template>
<script>
    var vm = new Vue({ //根组件
        el: '#itany',
        components: {
            'my-hello': { //父组件
                data() {
                    return {
                        msg: '网博',
                        name: 'tom',
                        age: 23,
                        user: {
                            id: 9527,
                            username: '唐伯虎'
                        },
                    }
                },
                template: '#hello',
                components: {
                    'my-world': { //子组件
                        template: '#world',
                    }
                }
            }
        }
    });
</script>

2、子组件只能在父组件内部使用 => 如上<my-world></my-world>在id为hello的组件中;
3、默认情况下,子组件无法访问父组件中的数据,每个组件实例的作用域是独立的。

2. 组件间数据传递 (通信)

2.1 子组件访问父组件的数据

a)在调用子组件时,绑定想要获取的父组件中的数据
b)在子组件内部,使用props选项声明获取的数据,即接收来自父组件的数据

<div id="itany">
    <my-hello></my-hello>
</div>
<template id="hello">
    <div>
        <h3>我是hello父组件</h3>
        <h3>访问自己的数据:{{msg}},{{name}},{{age}},{{user.username}}</h3>
        <hr>
        <my-world :message="msg" :name="name" :age="age"></my-world>
    </div>
</template>
<template id="world">
    <div>
        <h4>我是world子组件</h4>
        <h4>访问父组件中的数据:{{message}},{{name}},{{age}},{{user.username}}</h4>
    </div>
</template>
<script>
    var vm = new Vue({ //根组件
        el: '#itany',
        components: {
            'my-hello': { //父组件
                data() {
                    return {
                        msg: '网博',
                        name: 'tom',
                        age: 23,
                        user: {
                            id: 9527,
                            username: '唐伯虎'
                        },
                    }
                },
                template: '#hello',
                components: {
                    'my-world': { //子组件
                        template: '#world',
                        props: ['message', 'name', 'age', 'user'] //简单的字符串数组
                        // props:['message','name','age','user'] //简单的字符串数组
                        props: { //也可以是对象,允许配置高级设置,如类型判断、数据校验、设置默认值
                            message: String,
                            name: {
                                type: String,
                                required: true
                            },
                            age: {
                                type: Number,
                                default: 18,
                                validator: function(value) {
                                    return value >= 0;
                                }
                            },
                            user: {
                                type: Object,
                                default: function() { //对象或数组的默认值必须使用函数的形式来返回
                                    return {
                                        id: 3306,
                                        username: '秋香'
                                    };
                                }
                            }
                        },
                    },
                }
            }
        }
    });
</script>

总结:父组件通过props向下传递数据给子组件
注:组件中的数据共有三种形式:data、props、computed

2.2 父组件访问子组件的数据

a)在子组件中使用vm.$emit(事件名,数据)触发一个自定义事件,事件名自定义
b)父组件在使用子组件的地方监听子组件触发的事件,并在父组件中定义方法,用来获取数据

<div id="itany">
    <my-hello></my-hello>
</div>
<template id="hello">
    <div>
        <h3>我是hello父组件</h3>
        <h3>访问自己的数据:{{msg}},{{name}},{{age}},{{user.username}}</h3>
        <h3>访问子组件的数据:{{sex}},{{height}}</h3>
        <hr>
        <my-world :message="msg" :name="name" :age="age" @e-world="getData"></my-world>
    </div>
</template>
<template id="world">
    <div>
        <h4>我是world子组件</h4>
        <h4>访问父组件中的数据:{{message}},{{name}},{{age}},{{user.username}}</h4>
        <h4>访问自己的数据:{{sex}},{{height}}</h4>
        <button @click="send">将子组件的数据向上传递给父组件</button>
    </div>
</template>
<script>
    var vm = new Vue({ //根组件
        el: '#itany',
        components: {
            'my-hello': { //父组件
                methods: {
                    getData(sex, height) {
                        this.sex = sex;
                        this.height = height;
                    }
                },
                data() {
                    return {
                        msg: '网博',
                        name: 'tom',
                        age: 23,
                        user: {
                            id: 9527,
                            username: '唐伯虎'
                        },
                        sex: '',
                        height: ''
                    }
                },
                template: '#hello',
                components: {
                    'my-world': { //子组件
                        data() {
                            return {
                                sex: 'male',
                                height: 180.5
                            }
                        },
                        template: '#world',
                        props: ['message', 'name', 'age', 'user'] //简单的字符串数组
                        // props:['message','name','age','user'] //简单的字符串数组
                        props: { //也可以是对象,允许配置高级设置,如类型判断、数据校验、设置默认值
                            message: String,
                            name: {
                                type: String,
                                required: true
                            },
                            age: {
                                type: Number,
                                default: 18,
                                validator: function(value) {
                                    return value >= 0;
                                }
                            },
                            user: {
                                type: Object,
                                default: function() { //对象或数组的默认值必须使用函数的形式来返回
                                    return {
                                        id: 3306,
                                        username: '秋香'
                                    };
                                }
                            }
                        },
                        methods: {
                            send() {
                                // console.log(this);  //此处的this表示当前子组件实例
                                this.$emit('e-world', this.sex, this.height); //使用$emit()触发一个事件,发送数据
                            }
                        }
                    },
                }
            }
        }
    });
</script>

总结:子组件通过events给父组件发送消息,实际上就是子组件把自己的数据发送到父组件

上一篇 下一篇

猜你喜欢

热点阅读