vue父子组件通信

1.子组件获取父组件data

子组件为bbb
父组件为aaa
bbb想要获取aaa里的msg,msg1

• 父组件调用子组件

<bbb :m="数据" ></bbb>

• 父组件

父组件的写法

• 子组件在props内接收

props: {
    'm': {
        type: String,
        default: ''
    },
    'myMsg': {
        type: String,
        default: ''
    }
}

• m即可获取msg的值,myMsg即可获取msg1的值
  e.g.

e.g.

1.父组件获取子组件data

思路

• 子组件发送自己的数据
  语法：

vm.$emit(事件名，数据)

• 父组件用v-on 即@去接受事件

实例

1. 子组件bbb自己定义数据
2. 子组件bbb定义method 发送数据

3. 子组件bbb触发click事件去发送消息
   bbb

   
   
   

   4.aaa父组件使用bbb子组件时去接收消息 用@+事件名
   aaa

   
   
   5.aaa里面的get方法获取cmsg的值

单一事件通信管理

在整个vue上绑定一个事件总线

var Event=new Vue();

    Event.$emit(事件名称, 数据)

    Event.$on(事件名称,function(data){
        //data
    }.bind(this));

项目实例:
event.js

import Vue from 'vue'

//Vue 全局注册事件总线
const EventBus = new Vue()
Object.defineProperties(Vue.prototype, {
  $bus: {
    get: function () {
      return EventBus
    }
  }
});

发送消息

this.$bus.$emit("transform_sql_config", this.$data.sql_config)

接收消息

this.$bus.$on("transform_sql_config", this.formatData)

最后，还可以使用vuex状态管理
记录：https://zhuanlan.zhihu.com/p/30352291?utm_medium=social&utm_source=wechat_timeline&from=groupmessage&isappinstalled=0