描述父子组件和非父子组件是怎么通信的

在Vue中，父子组件通信和非父子组件通信的方式是不同的。

1. 父子组件通信：父子组件之间的通信可以通过`props`和事件来实现。父组件可以通过`props`向子组件传递数据，子组件可以通过`$emit`触发事件并向父组件传递数据。比如，我们可以在父组件中向子组件传递一个名字：

父组件：

<template>
  <div>
    <child-component :name="name" @update-name="updateName"></child-component>
  </div>
</template>

<script>
import ChildComponent from "@/components/ChildComponent.vue";

export default {
  components: {
    ChildComponent,
  },
  data() {
    return {
      name: "Vue",
    };
  },
  methods: {
    updateName(newName) {
      this.name = newName;
    },
  },
};
</script>

子组件：

<template>
  <div>
    <p>My name is {{ name }}</p>
    <button @click="changeName">Change Name</button>
  </div>
</template>

<script>
export default {
  props: {
    name: String,
  },
  methods: {
    changeName() {
      this.$emit("update-name", "React");
    },
  },
};
</script>

2. 非父子组件通信：非父子组件之间的通信需要借助一个中央事件总线（event bus）来实现。可以在Vue实例中创建一个事件总线，并通过`$emit`触发事件，通过`$on`监听事件。比如，我们可以在一个组件中触发一个事件，另一个组件中监听这个事件：

// Event Bus
const eventBus = new Vue();

// Component A
<template>
  <div>
    <button @click="emitEvent">Emit Event</button>
  </div>
</template>

<script>
export default {
  methods: {
    emitEvent() {
      eventBus.$emit("event-name", "Event Data");
    },
  },
};
</script>

// Component B
<template>
  <div>
    <p>{{ eventData }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      eventData: "",
    };
  },
  mounted() {
    eventBus.$on("event-name", (data) => {
      this.eventData = data;
    });
  },
};
</script>

这样，当在组件A中点击按钮时，会触发一个名为`event-name`的事件，并向事件总线传递一个数据。组件B中监听这个事件，并在事件回调中更新数据。这样就实现了非父子组件之间的通信。