Vue组件间通信有哪几种方式?

　　在Vue中，组件之间可以通过不同的方式进行通信。以下是几种常见的方式：

      1.Props/属性：父组件可以通过props将数据传递给子组件。子组件可以通过props接收父组件传递的数据，并在其模板中使用。这是最基本和常见的组件通信方式之一。

<!-- ParentComponent.vue -->
<template>
  <div>
    <ChildComponent :message="parentMessage" />
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  data() {
    return {
      parentMessage: 'Hello from parent component',
    };
  },
  components: {
    ChildComponent,
  },
};
</script>

<!-- ChildComponent.vue -->
<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  props: ['message'],
};
</script>

　　2.自定义事件：子组件可以通过$emit方法触发一个自定义事件，并向父组件传递数据。父组件可以在子组件上使用v-on指令监听该自定义事件，并在父组件中处理触发的事件。

<!-- ChildComponent.vue -->
<template>
  <div>
    <button @click="sendMessage">Send Message</button>
  </div>
</template>

<script>
export default {
  methods: {
    sendMessage() {
      this.$emit('custom-event', 'Hello from child component');
    },
  },
};
</script>

<!-- ParentComponent.vue -->
<template>
  <div>
    <ChildComponent @custom-event="handleEvent" />
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  methods: {
    handleEvent(message) {
      console.log(message); // Output: Hello from child component
    },
  },
  components: {
    ChildComponent,
  },
};
</script>

　　3.Vuex/共享状态管理：Vuex是Vue官方提供的状态管理库，用于在组件之间共享和管理状态。通过Vuex，组件可以从共享状态中读取数据，并使用提交mutations或触发actions的方式更新共享状态。

<!-- ChildComponent.vue -->
<template>
  <div>
    <p>{{ message }}</p>
    <button @click="updateMessage">Update Message</button>
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex';

export default {
  computed: {
    ...mapState(['message']),
  },
  methods: {
    ...mapMutations(['updateMessage']),
  },
};
</script>

<!-- ParentComponent.vue -->
<template>
  <div>
    <ChildComponent />
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent,
  },
};
</script>

<!-- store.js -->
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    message: 'Hello from Vuex store',
  },
  mutations: {
    updateMessage(state, newMessage) {
      state.message = newMessage;
    },
  },
});

　　4.$refs：通过在组件上使用ref属性，父组件可以通过this.$refs访问子组件实例，并直接调用子组件的方法或访问子组件的属性。这种方式主要用于父组件主动调用子组件的方法或获取子组件的状态。

<!-- ParentComponent.vue -->
<template>
  <div>
    <ChildComponent ref="child" />
    <button @click="sendMessage">Send Message</button>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  methods: {
    sendMessage() {
      this.$refs.child.receiveMessage('Hello from parent component');
    },
  },
  components: {
    ChildComponent,
  },
};
</script>

<!-- ChildComponent.vue -->
<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: '',
    };
  },
  methods: {
    receiveMessage(message) {
      this.message = message;
    },
  },
};
</script>

　　5.Event Bus/事件总线：创建一个Vue实例作为事件中心，可以通过该实例的$emit和$on方法进行组件之间的通信。组件可以通过$emit方法触发自定义事件，其他组件可以通过$on方法监听并处理这些事件。

// eventBus.js
import Vue from 'vue';

const eventBus = new Vue();

export default eventBus;

// eventBus.js
import Vue from 'vue';

const eventBus = new Vue();

export default eventBus;

　    通过使用事件总线，任何组件都可以通过事件触发和监听来进行通信，不论它们之间的关系是父子组件、兄弟组件还是跨级组件。

　　这些是一些常见的Vue组件间通信方式，每种方式都有其适用的场景和特点。选择合适的方式取决于你的具体需求和组件之间的关系。