如何实现 Vue.js 中的父子组件通信？事件驱动揭秘

2024-03-07 21:05:16

事件驱动的父子组件通信：深入剖析

子组件事件触发：传递指令

父子组件通信的核心在于事件触发。在子组件中，通过使用 v-on 指令绑定事件监听器，您可以指定要触发的事件名称和事件处理函数。当事件发生时，该函数将被执行，从而触发父组件的响应。

<template>
  <button @click="handleParentEvent">触发父事件</button>
</template>

<script>
export default {
  methods: {
    handleParentEvent() {
      this.$emit('child-event')
    }
  }
}
</script>

父组件事件触发：发送信号

在父组件中，通过 $emit 方法可以触发子组件事件。在该方法中，需要指定事件名称和要传递给子组件的数据，从而将信号发送给子组件。

<template>
  <ChildComponent @child-event="handleChildEvent" />
</template>

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

export default {
  components: { ChildComponent },
  methods: {
    handleChildEvent() {
      console.log('子组件触发了事件')
    }
  }
}
</script>

实例应用：API 调用通知

举个例子，假设父组件需要通知子组件，表示可以执行 API 操作。

子组件事件处理函数：

<template>
  <button @click="handleApiAction">执行 API 操作</button>
</template>

<script>
export default {
  methods: {
    handleApiAction() {
      this.$emit('api-action')
    }
  }
}
</script>

父组件事件触发：

<template>
  <ChildComponent @api-action="handleApiAction" />
</template>

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

export default {
  components: { ChildComponent },
  methods: {
    handleApiAction() {
      // 在这里触发 API 操作
      console.log('触发 API 操作')
    }
  }
}
</script>