说明: vue版本:2.6.10
1.组件通信问题
组件通信时组件开发中重要的一环,既要保持组件的独立性,又要保证数据隔离,同事有时又需要组件之间互相通信。比如父子组件通信,兄弟组件之间通信。
2.prop
2.1prop类型。可以设置prop的类型
props: {
title: String,
likes: Number,
isPublished: Boolean,
commentIds: Array,
author: Object,
callback: Function,
contactsPromise: Promise // or any other constructor
}
2.2传递静态或动态Prop
静态
<app-user-detail name="lee"></app-user-detail>
动态
<app-user-detail :name="name"></app-user-detail>
...
data: function() {
return {
name: "lee"
};
}
3.父子之间通信-prop传值
通过prop从父级组件传值到子组件。
4.父子之间通信-自定义事件
子组件里面修改内容,需要同步到父组件中。可以在子组件使用自定义事件进行广播,然后在父组件监听自定义事件。
5.父子之间通信-函数回调
父级组件中绑定一个事件,通过prop传入到子组件。子组件绑定该函数名称。
6.同级组件通信
使用自定义事件。 Child-B组件中
this.$emit('ageWasEdited',this.userAge);
Child-A组件中
<component-a>
:userAge="age"
@ageWasEdited='age=$event'
></component-a>
7.事件总线通信
EventBus:事件总线。在Vue中可以使用EventBus来作为沟通桥梁的概念,就像是所有组件共用相同的事件中心,可以向该中心注册发送事件或接收事件,所以组件都可以上下平行地通知其他组件。但是若使用不慎,就会造成难以维护的"灾难",因此才需要更完善的Vuex作为状态管理中心,将通知的概念上升到共享状态层次。