VUE组件间的通信方式都有哪些

Vue.js 是一个用于构建用户界面的渐进式框架。在 Vue.js 中，组件是构成应用的基本单元，而组件之间的通信则是实现复杂功能的关键。

组件间通信的概念

vue中每一个.vue文件我们都可以视为一个组件，通信指的是组件通过某种方式来传递信息以达到某个目的。

组件间通信的分类

在 Vue.js 中，组件之间的通信方式有多种，根据组件的关系（父子、兄弟或跨层级），主要有以下几种：

好的，下面是针对每种通信方式的示例代码：

1. 父子组件通信

Props Down

父组件：

<template>
  <div>
    <child-component :message="parentMessage"></child-component>
  </div>
</template>

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

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

子组件：

<template>
  <div>{
  
  { message }}</div>
</template>

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

$emit Up

子组件：

<template>
  <button @click="sendMessage">Click me</button>
</template>

<script>
export default {
     
     
  methods: {
     
     
    sendMessage() {
     
     
      this.$emit('send-message', 'Hello from Child');
    }
  }
}
</script>

父组件：

<template>
  <div>
    <child-component @send-message="receiveMessage"></child-component>
  </div>
</template>

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

export default {
     
     
  components: {