详细聊聊vue组件是如何实现组件通讯的

Vue组件通讯是指在Vue应用中，组件之间通过交互实现信息传递和共享数据的一种方式。Vue提供了多种方式来实现组件通讯，如props、$emit、$parent、$children、eventBus、vuex等。在接下来的篇章中，我们将详细讲解Vue组件通讯的实现方式及其应用场景。

一、Props和$emit

在Vue组件中，子组件可以通过props属性来传递数据，父组件可以通过$emit方法来触发事件，从而实现父子组件之间的通讯。

<!-- 父组件 -->
<template>
  <div>
    <h1>父组件</h1>
    <Child :childData="data" @childItemClick="handleChildItemClick"></Child>
  </div>
</template>

<script>
import Child from './Child'

export default {
  name: 'Parent',
  data() {
    return {
      data: [
        {
          id: 1,
          name: 'Tom',
          age: 18
        },
        {
          id: 2,
          name: 'Jerry',
          age: 16
        }
      ]
    }
  },
  methods: {
    handleChildItemClick(item) {
      console.log('父组件收到子组件传来的数据：', item)
    }
  },
  components: {
    Child
  }
}
</script>

<!-- 子组件 -->
<template>
  <div>
    <h2>子组件</h2>
    <ul>
      <li v-for="item in childData" :key="item.id" @click="handleClick(item)">{{item.name}}</li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'Child',
  props: {
    childData: {
      type: Array,
      default: () => []
    }
  },
  methods: {
    handleClick(item) {
      this.$emit('childItemClick', item)
    }
  }
}
</script>

上面的代码演示了父子组件之间的通讯，父组件传递数据给子组件，并监听子组件触发的事件。在子组件中，我们使用props属性接收父组件传递过来的数据，并在点击列表项时用$emit方法向父组件触发自定义事件。

二、EventBus

EventBus是Vue提供的一种事件机制，它可以让我们在任何组件中进行事件的监听和触发，从而实现组件间的通讯。

<!-- 组件A -->
<template>
  <div>
    <h1>组件A</h1>
    <button @click="handlerClick">传递数据</button>
  </div>
</template>

<script>
import { bus } from '../eventBus'

export default {
  name: 'ComponentA',
  methods: {
    handlerClick() {
      bus.$emit('componentAEvent', 'hello world')
    }
  }
}
</script>

<!-- 组件B -->
<template>
  <div>
    <h1>组件B</h1>
    <p>接收到的数据：{{ data }}</p>
  </div>
</template>

<script>
import { bus } from '../eventBus'

export default {
  name: 'ComponentB',
  data() {
    return {
      data: ''
    }
  },
  mounted() {
    bus.$on('componentAEvent', (data) => {
      this.data = data
    })
  }
}
</script>

在上面的代码中，我们定义了一个名为eventBus的公共事件总线，组件A通过eventBus的$emit方法向eventBus触发自定义事件，同时可以传递数据。组件B在mounted生命周期中，通过eventBus的$on方法监听到组件A触发的自定义事件，并通过回调函数接收到传递过来的数据。这样就实现了组件A和组件B之间的通讯。

除此之外，Vue还提供了多种组件通讯的方式，如：$parent、$children、provide、inject、vuex等，可能根据不同的应用场景选择不同的通讯方式进行实现。

总之，了解Vue组件通讯的各种实现方式及其应用场景对我们开发高质量的Vue应用有着重要的意义。