Vue 3 中的组件通信详解

写在前面

文末有我在前端面试多年的经验文章，分享给大家！！！

什么是组件通信？

组件通信指的是在 Vue 应用中，组件之间如何交换数据和事件。组件通信可以分为不同的场景，例如父子组件通信、兄弟组件通信、跨层级组件通信等。有效的组件通信能够使得应用的各个部分协同工作，提升开发效率和代码的可维护性。

组件通信的分类

Vue 3 提供了多种方式进行组件间的通信：

• Props: 自上而下传递数据。
• Emit: 自下而上报事件。
• v-model: 双向绑定。
• Provide/Inject: 跨层级传递数据。
• Expose/Ref: 暴露组件实例的方法和数据。
• Pinia/Vuex: 状态管理库。
• EventBus/Mitt: 全局事件总线。

通过 props 传递数据

props 是 Vue 提供的机制，用于父组件向子组件传递数据。子组件通过定义 props 来接收数据，这种方式确保数据的单向流动。

代码示例：

<!-- 父组件 Parent.vue -->
<template>
  <ChildComponent :message="parentMessage" />
</template>

<script setup>
import ChildComponent from './ChildComponent.vue'
import { ref } from 'vue'

const parentMessage = ref('Hello from Parent Component!')
</script>

---

<!-- 子组件 ChildComponent.vue -->
<template>
  <p>{{ message }}</p>
</template>

<script setup>
const props = defineProps({
  message: String
})
</script>

props 用于将数据从父组件传递到子组件。数据流动是单向的，子组件只能接收数据，不能修改。这种机制确保了数据的稳定性和可预测性。

应用场景： 用于在组件树中从父组件向子组件传递配置、状态等信息。

通过 $emit 触发事件

子组件通过 $emit 触发自定义事件，父组件监听这些事件来响应子组件的动作或变化。

代码示例：

<!-- 子组件 ChildComponent.vue -->
<template>
  <button @click="notifyParent">Click Me</button>
</template>

<script setup>
const emit = defineEmits(['childClicked'])

function notifyParent() {
  emit('childClicked')
}
</script>

---

<!-- 父组件 Parent.vue -->
<template>
  <ChildComponent @childClicked="handleChildClick" />
</template>

<script setup>
function handleChildClick() {
  console.log('Child component button clicked!')
}
</script>

$emit 用于子组件向父组件发送事件通知。父组件可以根据这些事件执行相应的逻辑或更新状态。

应用场景： 用于子组件完成某些操作后通知父组件，例如按钮点击、表单提交等。

v-model 双向绑定

v-model 用于在父子组件之间实现双向数据绑定。Vue 3 支持多个 v-model 绑定，可以更灵活地处理组件的双向绑定需求。

代码示例：

<!-- 父组件 Parent.vue -->
<template>
  <ChildComponent v-model:count="parentCount" />
  <p>Parent Count: {{ parentCount }}</p>
</template>

<script setup>
import ChildComponent from './ChildComponent.vue'
import { ref } from 'vue'

const parentCount = ref(0)
</script>

---

<!-- 子组件 ChildComponent.vue -->
<template>
  <button @click="increaseCount">Increase Count</button>
</template>

<script setup>
import { defineEmits, defineProps } from 'vue'

const props = defineProps(['modelValue'])
const emit = defineEmits(['update:modelValue'])

function increaseCount() {
  emit('update:modelValue', props.modelValue + 1)
}
</script>

使用v-model的时候，需要在子组件中一定要使用update:XXX开头的，绑定的变量可以随意

应用场景： 用于在组件之间进行双向数据绑定，如表单输入组件、计数器等。

通过 provide 和 inject

provide 和 inject 用于在组件树中跨层级传递数据。provide 在祖先组件中提供数据，inject 在后代组件中接收数据。

代码示例：

<!-- 祖先组件 Ancestor.vue -->
<template>
  <Descendant />
</template>

<script setup>
import { provide } from 'vue'
import Descendant from './Descendant.vue'

const providedValue = 'Shared data'
provide('sharedValue', providedValue)
</script>

---

<!-- 后代组件 Descendant.vue -->
<template>
  <Grandchild />
</template>

<script setup>
import Grandchild from './Grandchild.vue'
</script>

---

<!-- 孙组件 Grandchild.vue -->
<template>
  <p>{{ sharedValue }}</p>
</template>

<script setup>
import { inject } from 'vue'

const sharedValue = inject('sharedValue', 'Default Value')
</script>

provide 和 inject 允许祖先组件提供数据，后代组件可以通过 inject 接收这些数据。这种方式可以跨越多层组件传递信息。

应用场景： 用于在深层组件中使用来自上层的共享数据，如主题配置、全局设置等。

通过 expose 和 ref

expose 和 ref 可以让子组件暴露某些方法或属性给父组件或其他组件访问。expose 使得子组件的部分功能可以被外部组件调用。

代码示例：

<!-- 子组件 ChildComponent.vue -->
<template>
  <button @click="doSomething">Do Something</button>
</template>

<script setup>
import { defineExpose, ref } from 'vue'

const doSomething = () => {
  console.log('Doing something')
}

defineExpose({ doSomething })
</script>

---

<!-- 父组件 Parent.vue -->
<template>
  <button @click="callChildMethod">Call Child Method</button>
  <ChildComponent ref="childRef" />
</template>

<script setup>
import { ref } from 'vue'
import ChildComponent from './ChildComponent.vue'

const childRef = ref(null)

function callChildMethod() {
  childRef.value?.doSomething()
}
</script>

expose 用于定义子组件暴露的 API，ref 用于在父组件中引用子组件的实例并调用暴露的方法。

应用场景： 用于父组件直接调用子组件的方法或访问其内部状态。

通过 Vuex

Vuex 是 Vue 的官方状态管理库，用于集中管理应用的状态，并提供机制来更新状态。

代码示例：

// store.js
import { createStore } from 'vuex'

export const store = createStore({
  state() {
    return {
      count: 0
    }
  },
  mutations: {
    increment(state) {
      state.count++
    }
  },
  actions: {
    increment({ commit }) {
      commit('increment')
    }
  },
  getters: {
    getCount(state) {
      return state.count
    }
  }
})

---

<!-- 组件 A -->
<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script setup>
import { useStore } from 'vuex'
import { computed } from 'vue'

const store = useStore()
const count = computed(() => store.getters.getCount)
const increment = () => store.dispatch('increment')
</script>

---

<!-- 组件 B -->
<template>
  <div>
    <p>Current Count: {{ count }}</p>
  </div>
</template>

<script setup>
import { useStore } from 'vuex'
import { computed } from 'vue'

const store = useStore()
const count = computed(() => store.getters.getCount)
</script>

Vuex 提供集中式的状态管理，适用于大型应用中多个组件共享状态的场景。它确保了状态的统一和一致性。

应用场景： 适用于需要管理全局状态的应用，如用户信息、购物车内容等。

通过 Pinia

Pinia 是 Vue 3 的官方状态管理库，作为 Vuex 的替代品，提供了更现代、更简洁的 API。

代码示例：

// store.js
import { defineStore } from 'pinia'

export const useMainStore = defineStore('main', {
  state: () => ({
    count: 0
  }),
  actions: {
    increment

() {
      this.count++
    }
  }
})

---

<!-- 组件 A -->
<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script setup>
import { useMainStore } from './store'
import { computed } from 'vue'

const store = useMainStore()
const count = computed(() => store.count)
const increment = () => store.increment()
</script>

Pinia 提供了一个更简洁的状态管理方案，支持 TypeScript，易于使用和扩展。

应用场景： 用于需要集中管理应用状态的场景，特别适合 Vue 3 项目。

通过 Eventbus

Eventbus 是一种简单的事件发布/订阅模式，用于在组件间传递事件。在 Vue 3 中，推荐使用 mitt 作为事件总线的实现。

代码示例：

// eventBus.js
import mitt from 'mitt'

export const emitter = mitt()

---

<!-- 组件 A -->
<template>
  <button @click="sendMessage">Send Message to B</button>
</template>

<script setup>
import { emitter } from './eventBus'

function sendMessage() {
  emitter.emit('message', 'Hello from Component A!')
}
</script>

---

<!-- 组件 B -->
<template>
  <p>{{ message }}</p>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import { emitter } from './eventBus'

const message = ref('')

onMounted(() => {
  emitter.on('message', (msg) => {
    message.value = msg
  })
})
</script>

事件总线允许组件之间通过发布/订阅模式传递事件，但在大型应用中可能导致事件流动复杂，推荐使用其他状态管理工具。

应用场景： 适用于小型应用或临时的组件间通信需求。

通过 mitt

mitt 是一个轻量级的事件总线库，用于处理事件发布和订阅。

代码示例：

// eventBus.js
import mitt from 'mitt'

export const emitter = mitt()

---

<!-- 组件 A -->
<template>
  <button @click="sendMessage">Send Message</button>
</template>

<script setup>
import { emitter } from './eventBus'

function sendMessage() {
  emitter.emit('message', 'Hello from Component A!')
}
</script>

---

<!-- 组件 B -->
<template>
  <p>{{ message }}</p>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import { emitter } from './eventBus'

const message = ref('')

onMounted(() => {
  emitter.on('message', (msg) => {
    message.value = msg
  })
})
</script>

mitt 提供了一个简单的 API 来处理事件总线，适用于中小型项目中的组件间通信。
应用场景： 用于轻量级的事件处理和组件间通信。

总结

通过以上介绍，我们可以看到 Vue 3 提供了多种灵活的方式来处理组件间的通信问题。选择哪种方式取决于你的具体需求和项目规模。例如，在简单的应用中，使用 props 和 emit 就足够了；而在大型应用中，可能需要引入状态管理库如 Pinia 或 Vuex 来更好地管理复杂的状态。

希望这篇文章能帮助你更好地理解 Vue 3 的组件通信机制！

接下来给大家推荐一篇我在前端面试多年的经验文章，希望大家看完以后都可以领取到心仪的offer哦!

文章：《聊聊前端面试那些事儿》