vue中组件通信方式

第一种方式：父传子

    需求：将HomePage【父组件】中的数据msg传递给HomeHeader【子组件】
    分析：HomePage是HomeHeader组件的父组件
    父组件数据传递给子组件---》父传子

    步骤：
        第一步：在父组件使用子组件时候，绑定自定义属性,属性值就是data中要传递的数据

       第二步：在子组件中通过props来接收数据

第一种方案： 

//props: ["自定义的那个属性"],
// props: ["msg"],

结果展示：

第二种方案： 

    props: { //对象的属性就是子组件绑定的属性
        msg: {
            type: String, //指定要接收的数据类型
            default: "100元" //设置默认值，如果没有绑定msg【此时父元素没有msg】，读取的是默认值
        }
    },

 第二种方式：子传父

需求二：在HomeHeader中定义一个数据title，想传递给HomePage组件
    子组件传递数据给父组件---》子传父

    步骤：--父组件不会主动向子组件要数据

    第一步：在子组件中通过$emit("自定义事件名",数据)，来发出广播
        this.$emit("自定义事件名",数据)

    第二步：在父组件使用子组件的时候监听子组件广播的事件，
        @自定义事件名="父组件中定义的事件"
        父组件事件中的参数data就是子组件发来的数据

 

 

 第三种方式：兄弟之间传值

    需求：兄弟组件传值
    HomeHeader和TabBar这两个组件是同一个父级，那么这两个组件是兄弟关系
    两种形式：

    第一种：A组件和B组件是兄弟，A组件可以将数据传递给父级，父级拿到数据再传递给B组件，达到A传B

    第二种：A组件和B组件是兄弟，A组件广播数据到BUS上，B组件去BUS上边取数据就行
    实现步骤：先定义一个BUS
    1.建一个公共的js模块，引入vue，创建vue实例，暴露vue实例Bus 

        demo06\src\utils\bus.js

import Vue from "vue"  //引入vue模块
let busEvent = new Vue();  //定义一个vue实例对象
export default busEvent;  暴露

    2.在A和B组件中分别引入Bus,在A组件中通过Bus.$emit("自定义事件名",数据)

    3.在B组件中通过Bus.$on("自定义事件名",(data)=>console.log(data)),data就是传递过来的数据