1.子組件獲取父組件data

子組件為bbb
父組件為aaa
bbb想要獲取aaa里的msg,msg1

• 父組件調(diào)用子組件

<bbb :m="數(shù)據(jù)" ></bbb>

• 父組件

父組件的寫法

• 子組件在props內(nèi)接收

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

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

e.g.

1.父組件獲取子組件data

思路

• 子組件發(fā)送自己的數(shù)據(jù)
  語法：

vm.$emit(事件名，數(shù)據(jù))

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

實例

1. 子組件bbb自己定義數(shù)據(jù)
2. 子組件bbb定義method 發(fā)送數(shù)據(jù)

3. 子組件bbb觸發(fā)click事件去發(fā)送消息
   bbb

   
   
   
   

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

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

單一事件通信管理

在整個vue上綁定一個事件總線

var Event=new Vue();

    Event.$emit(事件名稱, 數(shù)據(jù))

    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
    }
  }
});

發(fā)送消息

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

接收消息

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

最后，還可以使用vuex狀態(tài)管理
記錄：https://zhuanlan.zhihu.com/p/30352291?utm_medium=social&utm_source=wechat_timeline&from=groupmessage&isappinstalled=0