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.
1.父组件获取子组件data
思路
- 子组件发送自己的数据
语法:
vm.$emit(事件名,数据)
- 父组件用v-on 即@去接受事件
实例
- 子组件bbb自己定义数据
- 子组件bbb定义method 发送数据
-
子组件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