父—子共享数据:使用自定义属性。
//父组件
<Son :msg="message" :user="userInfo"/>
data() {
return {
message: "hello",
userInfo: {
name: "zs",
age: 12
}
}
}
//子组件
props: ['msg', 'user']
子—父共享数据:使用自定义事件。
//子组件
export default {
data() {
return {
count: 0,
}
},
methods: {
add() {
this.count += 1;
this.$emit('numchange', this.count);
}
}
}
//父组件
<Son @numchange="getNewCount"/>
export default {
data() {
return {
countFromSon: 0
}
},
methods: {
getNewCount(val) {
this.countFromSon = val;
}
}
}
兄弟关系:在Vue2.x中数据共享的方案是EventBus。
//eventBus.js
//创建eventBus.js模块,向外共享一个Vue的实例对象。
import Vue from 'vue';
export default new Vue();
//兄弟组件A:数据发送方
//在数据发送方,调用bus.$emit('事件名称', 要发送的数据)方法触发自定义事件。
import bus from './eventBus.js'
export default {
data() {
return {
msg: 'hello'
}
},
methods: {
sendMsg() {
bus.$emit('share', this.msg);
}
}
}
//兄弟组件B:数据接收方
//在数据接收方,调用bus.$on('事件名称', 事件处理函数)方法注册一个自定义事件。
import bus from './eventBus.js'
export default {
data() {
return {
msgFromLeft: ''
}
},
methods: {
sendMsg() {
bus.$on('share', val => {
this.msgFromLeft = val;
});
}
}
}