vue 组件通信

父组件->子组件：通过props接受父传递数据

步骤1：子通过props键来接受父传递过来的数据                props:['变量名1',...,'变量名n']

步骤2：父传递给子     父必须在调用子的组件上通过语法  v-bind:子props中的变量名="父data中的键"

　　　留心: props相当于在data中定义变量,因此使用大括号来获取

 

子组件->父组件：通过$emit创建自定义事件发送数据

 步骤1：子创建自定义事件   通过语法this.$emit(事件名称, 数据1, ..., 数据n)

// 简单理解：页面加载完毕 -> 组件渲染完毕会触发下面这个键
    mounted() {  //相当于window.onload
        // 在这里面创建自定义事件
        this.$emit("getSonData", this.myName2)
    },
    
    //点击给父发送   定义子普通方法
    methods:{
        getSonData(){
             this.$emit("getSonData", this.myName2)
        }
    }

 步骤2：父调用事件获取数据 父必须在调用子的组件上触发事件 @自定义事件="函数名"

　　父调用子的时候 添加事件

 

 <子组件  @自定义事件名='父普通方法' >     </子组件> 

 ​    // 声明父普通函数
    methods: {
        showSonDataFn(data) {
            //data就是 子发送的数据
            this.mySonData = data //保存数据
        }
    },

  留心1：子什么时候创建自定义事件 

　　　　1. 点击的时候

　　　　2.mounted 函数相当于子组件加载完毕 类似window.onload

留心2：底层会将自定义事件中的数据 传递给函数的形参

 

 

兄弟组件：通过EventBus（事件总线）

 const eventBus = new Vue() // 相当于创建一个组件数据共享中心
 

 ​发送数据： eventBus.$emit(自定义事件名称，数据1，....，数据n)
 接受数据： eventBus.$on(自定义事件名称，处理函数)

 

--