Vue如何实现组件间通信

Vue 提供了很多种实现组件间通信的方案，包括组件属性、事件、自定义事件和全局事件总线等方法。我们可以根据具体情况来选择其中一种方案来解决组件间通信的问题。

组件属性

组件属性是一种比较简单的组件间通信的方式，它通过在父组件中绑定属性，在子组件中通过 props 属性来接收父组件中传递过来的数据。父组件可以将自己的数据传递到子组件中，而子组件只能被动地接收。

示例

<!-- 父组件 -->
<template>
  <div>
    <child :title="title"></child>
  </div>
</template>

<script>
import Child from './child.vue'

export default {
  name: 'Parent',
  components: {
    Child
  },
  data () {
    return {
      title: 'Hello World'
    }
  }
}
</script>

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

<script>
export default {
  name: 'Child',
  props: {
    title: String
  }
}
</script>

在上面的示例中，父组件中通过 :title="title" 的方式将 title 属性传递给子组件，而子组件通过 props 属性接收 title 属性，并在组件中直接使用。

事件

组件通过事件来实现与其它组件的通讯也是 Vue 中常用的方式之一。事件的传递类似于浏览器的事件触发机制，在父组件中定义事件并注册事件处理函数，在子组件中通过 $emit 方法触发该事件。这种方式比较灵活，可以实现组件的自由通信。

示例

<!-- 父组件 -->
<template>
  <div>
    <child @child-event="handleChildEvent"></child>
  </div>
</template>

<script>
import Child from './child.vue'

export default {
  name: 'Parent',
  components: {
    Child
  },
  methods: {
    handleChildEvent (msg) {
      console.log(msg)
    }
  }
}
</script>

<!-- 子组件 -->
<template>
  <div>
    <button @click="handleClick">Click Me</button>
  </div>
</template>

<script>
export default {
  name: 'Child',
  methods: {
    handleClick () {
      this.$emit('child-event', 'Hello World')
    }
  }
}
</script>

在上面的示例中，父组件注册了 child-event 事件的处理函数 handleChildEvent，并通过 @child-event="handleChildEvent" 的方式将这个处理函数绑定到子组件上。子组件中通过 $emit 方法触发 child-event 事件，并传递了一个消息 'Hello World'。父组件中的 handleChildEvent 方法接收到了这个消息并进行了处理。

除了以上的两种方式，Vue 还提供了其它的方式来实现组件间通信，包括自定义事件和全局事件总线等。我们可以根据具体情况选择适合自己的方式来解决组件间通信的问题。