组件间数据传递

一、组件间数据传递

　　1、父子组件之间的规则

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

　　　　2、子组件只能在父组件内部使用

　　　　3、默认情况下，子组件无法访问父组件中的数据，父组件也无法访问子组件中的数据，每个组件实例的作用域是独立的

　　2、组件间数据传递（通信）

　　　　1、子组件访问父组件的数据

　　　　　　步骤1：父组件在调用子组件时，绑定子组件想要获取的父组件中的数据

　　　　　　步骤2：在子组件内部，使用props选项声明获取的数据，即接收来自父组件的数据

　　　　2、总结：

　　　　　　父组件通过props向下传递数据给子组件

　　　　　　组件中的数据共有三种形式：data、props、computed

　　　　3、父组件访问子组件的数据

　　　　　　在子组件中使用vm.$emit(事件名,数据)触发一个自定义事件，事件名自定义

　　　　　　父组件在使用子组件的地方监听子组件触发的事件，并在父组件中定义方法，用来获取数据。

　　　　4、总结

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

　　　　5、示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>父子组件及组件间数据传递</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <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>//子组件不能直接的访问父组件中的数据，组件之间数据都是独立的，但是通过props就可以了
            <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:String,//指定传递过来的message必须是个字符串，类型限制，限制条件可以是字面量
                                name:{
                                    type:String,  //指定类型和数据校验，限制条件可以是对象，required:true表示必须要有name值，
                                    required:true
                                },
                                age:{
                                    type:Number, 
                                    default:18,    //自定义默认值
                                    validator:function(value){    //自定义校验规则，年龄必须大于0
                                        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>
</body>
</html>

View Code