Vue组件通信

一、组件关系：

1. 父子

2. 子子

3. 祖先-后代

4. 非关系组件

二、通信方式：

1.props ：父类给子类传递数据

        eg:   父组件：<Child name="zs"/>
                子组件内部：props:{name:String}

2.$emit触发自定义事件：子类给父类传递数据

        eg:   父组件：<Child @add="add($event)"/> 

                子组件：this.$emit('add',params);

3.使用ref：父类调用子类方法

        eg:   父组件： <Child ref="child"> 

                父组件：this.$refs.child获得子组件实例，操作子组件方法。

4.$parent或$root: 共同祖辈搭建通信桥。

        eg:   字组件1：this.$parent.$on("add",this.add);

                子组件2：this.$parent.$emit("add");

5.EventBus：兄弟组件，中央事件总线。

        eg:Vue.prototype.$bus=new Vue();

                this.$bus.$on("add",(params)=>{});

                this.$bus.$emit("add",params);

6.vuex:共享数据存放

7.provide与inject:祖先向后代组件传值

        eg: 祖先组件：provide(){return {foo:'foo'}}

              后代组件：inject:['foo']        

8.attrs与listeners

        eg1: 父组件： <Child name="zcy" @some-event="eventHandler"> 

                子组件：this.$attrs.name;this.$emit("some-event",params);

                // $attrs获取的是props没定义的

        eg2: 祖先组件：<Parent name="zcy" @some-event="eventHandler"> 

                Parent组件：<Child v-bind="$attrs" v-on="$listeners"> 

                Child组件：this.$attrs.name;this.$emit("some-event",params);