Vue:组件之间的通信

父子组件之间的通信

1. 父组件给子组件传递数据-props

• 核心：通过props，给子组件添加自定义属性

<template id="parent">
    <div>
        <h2>parent</h2>
        <children :msg="msg"></children>
    </div>
</template>
<javascript>
components:{
    parent:{
        template:'#parent',
        data(){
            return {
                msg:'我是父组件的数据'
            }
        },
        components:{
            children:{
                template:'<h3>children {{msg}}</h3>'
                //props:{msg} 子组件校验父组件传过来的数据，必须为字符串类型
                props:{msg:String},//props:['msg'] 可以用数组和对象来接受数据，子组件只接收父组件传来的数据，不校验
            }
        }
    }
}
</javascript>

2.子组件给组件传递数据- events

• 核心：添加自定义事件，通过this.$emit给父组件发射自己的数据

<template id="parent">
    <div>
        <h2>parent{{}}</h2>
        <children @msg="getMsg"></children>
    </div>
</template>
<javascript>
components:{
    parent:{
        template:'#parent',
         methods:{
              getMsg(data){
                    this.msg=data
              }
          },
        components:{
            children:{
                template:'<h3>children {{msg}}</h3>',
                data(){
                       return{msg:'我是子组件的数据'}
                },
                mounted(){
                        this.$emit('msg',this.msg) //子组件发射一个事件给父组件，把自己的数据告诉父组件
                }
            }
        }
    }
}
</javascript>

注意：$emit(str1,[str2])，str1:自定义事件名，str2:要传入的参数，可以是多个。

3.子组件更改父组件数据，数据同步

• 核心：父组件在给子组件传递数据的时候，传递一个对象，利用对象是对地址的引用来进行更改

data(){
    return {
        msg:{name:'hello world!'}
    }
}

4.子组件更改父组件数据，但是不同步

• 核心：在组件加载进来时，新创建变量，值引用的是父亲传过来的值；我们更改的只是这个新变量的值；
  注意：在自定义组件中，data都是函数，利用返回值来返回数据的

components:{
        children:{
            template:'<h3 @click="change">children {{bb}}</h3>',
            //props:{aa:String} 子组件校验父组件传过来的数据，必须为字符串类型
            props:{aa:String},//props:['aa'] 子组件只接收父组件传来的数据，不校验
            data(){
               return{
                   bb:this.aa
               }
            },
            mounted(){
                this.bb=this.aa
            },
            methods:{
                change(){
                    this.bb='hello world!';
                }
            }
        }
    }
}

非父子组件数据传递

• 核心：通过Event.$emit发射数据，通过Event.$on接收数据。

var Event=new Vue;//事件； Event.$on Event.$emit
var app=new Vue({
 el:'#app',
 components:{
     hello1:{
         template:'#t1',
         methods:{
             send(){//发射事件
                 Event.$emit('myEvent','我是数据1111')
             }
         }
     },
     hello2:{
         template:'#t2',
         data(){
             return {msg:""}
         },
         mounted(){//提前绑定好的事件
             Event.$on('myEvent',(a)=>{
                 this.msg=a;
             })
         }
     }
 }
})