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
思路
- 子組件發(fā)送自己的數據
語法：
vm.$emit(事件名，數據)
- 父組件用v-on 即@去接受事件
實例
- 子組件bbb自己定義數據
- 子組件bbb定義method 發(fā)送數據
-
子組件bbb觸發(fā)click事件去發(fā)送消息
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
}
}
});
發(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
