Vue 组件间的通信方式

        在前面我们了解过了，Vue的本质就是由很多组件构成的。那必然会出现两个组件需要传递数据的情况。

        假设现在有这么一个页面，针对组件间的不同情况，我们使用不同的通信方式。

目录

props配置项

自定义事件

全局事件总线

消息的订阅与发布

插槽

---

props配置项

        功能：让组件接收外部传过来的数据

使用：

        1.传递数据：

    <Demo bane = "xxx"/>

        2.接收数据：

第一种方式（只接收）：

    props:['name']

第二种方式（限制类型）：

    props:{name:String}

第三种方式（限制类型、限制必要性、指定默认值）：

    props:{
        name:{
        type:String, //类型
        required:true, //必要性
        default:'男' //默认值
        }
    }

使用场景： 

        1.props配置项可以实现父组件给子组件传递数据。例如上图的A组件给B组件、C组件传递数据。

        2.使用props也可以实现A组件给D组件传递数据，但是数据需要逐层传递，即A先传给C组件，C组件再传递给D组件。

        3.props配置项也可以实现子组件传递数据给父组件，但需要父组件传递一个函数给子组件，在必要时，在子组件中调用这个函数，传递需要的参数过去。

自定义事件

        功能：实现子组件向父组件传递数据

使用：

        1.绑定自定义事件：

                第一种方式，在父组件中：

            <Demo @atguigu="test"/> 或 <Demo v-on:atguigu="test"/>

                 第二种方式，在父组件中：

        <Demo ref="demo"/>
        ......
        mounted(){
           this.$refs.xxx.$on('atguigu',this.test)
        }