阅读 374

Vue组件之间通信

说明: 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作为状态管理中心,将通知的概念上升到共享状态层次。

8.参考链接

聊聊 Vue.js 组件间通信

简易使用Vue中的中央事件总线