How to communicate across components in vue

In Vue.js, cross-component communication can be achieved in the following ways: Parent-child communication: passing data or event triggering through props. Ancestor-descendant communication: sharing data sources via provide/inject. Sibling component communication: via event bus, Vuex state management, or custom events.

#How to communicate across components in Vue?

Introduction:
In Vue.js applications, cross-component communication is crucial to share data and events. The following are several ways to achieve cross-component communication:

Parent-child communication:

• Passing data through properties: The parent component passes the data to the child component as a prop , subcomponents use v-bind to bind data.
• Triggered by events: The child component triggers an event and passes the data to the parent component. The parent component listens for the event in the template of the parent component.

Ancestor-descendant communication:

• Through provide/inject: Ancestor components provide a data source, and descendant components obtain data through inject.

Sister component communication:

• Through Event Bus: Create a Vue instance to act as an event bus, and all components can listen and trigger events.
• State management through Vuex: Use the Vuex state management library to store global state and make it accessible to all components.

Custom events:

• Through $emit/$on: Trigger custom events through $emit in the child component, in the parent component Listen to events through $on.

Attribute passing example:

<!-- 父组件 -->
<template>
  <Child-Component :message="message" />
</template>

<!-- 子组件 -->
<template>
  <div>{{ message }}</div>
</template>

Triggered by event example:

<!-- 子组件 -->
<template>
  <button @click="emitMessage">触发事件</button>
</template>

<script>
export default {
  methods: {
    emitMessage() {
      this.$emit('message', '事件数据');
    }
  }
};
</script>

<!-- 父组件 -->
<template>
  <Child-Component @message="handleMessage" />
</template>

<script>
export default {
  methods: {
    handleMessage(message) {
      console.log(message); // 输出：事件数据
    }
  }
};
</script>

The above is the detailed content of How to communicate across components in vue. For more information, please follow other related articles on the PHP Chinese website!