深入浅析 Vue 组件间事件传递

在 Vue 应用程序中，组件是相互独立的，但有时需要从一个组件向另一个组件传递数据或触发事件。在这种情况下，Vue 允许通过事件传递数据和在组件之间通信。

父子组件之间的事件传递

父子组件之间的事件传递是最简单和最常见的一种情况。Vue 组件中，子组件需要把数据传递给父组件的时候，它可以通过 emit 事件的方式来触发父组件中的特定函数。

下面的示例展示了如何在子组件中触发 emit 事件，并将该事件传递给父组件：

<template>
  <div>
    <button @click="handleClick">触发事件</button>
  </div>
</template>

<script>
export default {
  name: "ChildComponent",
  methods: {
    handleClick() {
      this.$emit("my-event", "来自子组件的消息");
    },
  },
};
</script>

父组件可以通过在子组件上使用 v-on 监听事件，来处理传递的数据：

<template>
  <div>
    <child-component @my-event="handleMyEvent"></child-component>
  </div>
</template>

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

export default {
  name: "ParentComponent",
  components: {
    ChildComponent,
  },
  methods: {
    handleMyEvent(data) {
      console.log(data);
    },
  },
};
</script>

兄弟组件之间的事件传递

尽管兄弟组件之间的通信相对少见，但在某些情况下，兄弟组件之间的通信是必要的。Vue 允许在共同的祖先组件中触发和处理事件。

下面的示例展示了如何通过在共同的祖先组件中触发事件，在兄弟组件之间进行通信：

共同祖先组件

<template>
  <div>
    <child-component-1 @my-event="handleMyEvent"></child-component-1>
    <child-component-2></child-component-2>
  </div>
</template>

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

export default {
  name: "ParentComponent",
  components: {
    ChildComponent1,
    ChildComponent2,
  },
  methods: {
    handleMyEvent(data) {
      console.log(data);
      this.$refs.childComponent2.handleMyEventFromParent(data);
    },
  },
};
</script>

兄弟组件1

<template>
  <div>
    <button @click="handleClick">触发事件</button>
  </div>
</template>

<script>
export default {
  name: "ChildComponent1",
  methods: {
    handleClick() {
      this.$emit("my-event", "来自兄弟组件1的消息");
    },
  },
};
</script>

兄弟组件2

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

<script>
export default {
  name: "ChildComponent2",
  data() {
    return {
      message: "",
    };
  },
  methods: {
    handleMyEventFromParent(data) {
      this.message = data;
    },
  },
};
</script>

在共同祖先组件中，我们创建了两个子组件。在兄弟组件1中，我们触发了自定义事件 my-event 并传递了一条消息。在祖先组件的 handleMyEvent 方法中，我们 console.log 了这条消息，并通过相应的引用触发了兄弟组件2中的 handleMyEventFromParent 方法来更新消息。

以上就是“深入浅析 Vue 组件间事件传递”的详细攻略，其中包含了父子组件和兄弟组件之间的事件传递，并提供了相关的示例说明。