父组件与子组件携手同行：Vue 3 和谐共存指南

2024-02-04 16:52:19

父子组件通信：Vue 3 中组件和谐共舞

在 Vue 3 的舞台上，组件扮演着不可或缺的角色，构筑着用户界面的恢弘蓝图。而父子组件之间的通信，则是这幅蓝图中的关键一笔，决定着应用程序的流畅性和可维护性。

1. Props：数据传递的桥梁

Props犹如一座桥梁，连接着父组件与子组件的数据世界。父组件通过定义 Props，并将其传递给子组件，子组件便可获取这些数据。这是一种单向的数据流，确保了子组件的数据不会影响父组件，保持着数据流动的一致性。

代码示例：

<template>
  <ChildComponent :message="message" />
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello from parent!'
    }
  }
}
</script>

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

<script>
export default {
  props: ['message']
}
</script>

2. Emit：事件触发的信号枪

当子组件需要向父组件报告事件时，Emit就如同一把信号枪，发出事件的召唤。父组件可以通过监听这个事件，并在触发时执行相应的动作。这是一种事件驱动的通信方式，允许子组件主动向父组件传递信息，实现组件间的互动。

代码示例：

<template>
  <button @click="emitMessage">Send message</button>
</template>

<script>
export default {
  methods: {
    emitMessage() {
      this.$emit('message', 'Hello from child!')
    }
  }
}
</script>

<template>
  <p v-on:message="handleMessage">{{ message }}</p>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    }
  },
  methods: {
    handleMessage(msg) {
      this.message = msg
    }
  }
}
</script>

3. 事件总线：组件间的广播中心

事件总线是一个全局的广播中心，允许组件在不直接引用彼此的情况下进行通信。组件可以通过发布或订阅事件，实现信息传递。这是一种松散耦合的通信方式，赋予组件极大的灵活性，让它们能够在事件总线的串联下协同工作。

代码示例：

<template>
  <button @click="sendMessage">Send message</button>
</template>

<script>
import { EventBus } from '@/event-bus.js'

export default {
  methods: {
    sendMessage() {
      EventBus.$emit('message', 'Hello from child!')
    }
  }
}
</script>

<template>
  <p v-on:message="handleMessage">{{ message }}</p>
</template>

<script>
import { EventBus } from '@/event-bus.js'

export default {
  data() {
    return {
      message: ''
    }
  },
  methods: {
    handleMessage(msg) {
      this.message = msg
    }
  },
  created() {
    EventBus.$on('message', this.handleMessage)
  },
  beforeDestroy() {
    EventBus.$off('message', this.handleMessage)
  }
}
</script>