面试题vue3组件通信有哪些方法

Vue 3 中组件之间的通信有多种常见的方法，这些方法可以帮助你在应用中建立父子组件、兄弟组件以及同级组件之间的数据共享和交互。以下是主要的几种通信方式：

1. Props（属性）：这是最直接的父子组件通信方式，父组件向子组件传递数据，子组件通过props接受并处理这些数据。

2. Refs：父组件可以通过refs访问子组件的实例，从而实现对子组件实例的直接操作或获取状态。

3. 自定义事件（$emit/$on）：通过`$emit`触发自定义事件，然后在父组件或其他组件中使用`$on`监听这些事件来进行响应。

4. 使用 Vuex：当组件间的通信变得复杂且需要数据管理时，可以借助Vuex这个状态管理模式，将共享状态集中管理。

5. Prop drilling（属性穿透）：如果层级过深，可以考虑通过props逐级传递数据，但这并不是最佳实践，可能导致代码复杂和维护困难。

6. Provide/Inject：提供者-注入者模式适用于需要跨级传递的数据，提供者通过`provide`提供数据，注入者通过`inject`接收。

7. Event Bus：创建一个全局事件中心，让各组件都可以发布和订阅事件，实现组件间的异步通信。

8. Vuex 插件：使用Vuex的插件机制，可以简化状态管理，实现组件间的同步通信。

相关问题：
1. Prop drilling为何不推荐？
2. 何时会选择使用Event Bus而非自定义事件？
3. Provide/Inject模式是如何实现组件间通信的？

相关问题

前端面试题vue3组件传值

### Vue3 组件间传值面试题及解答

#### 子组件如何访问父组件的数据？

子组件可以通过 `this.$parent` 访问父组件实例中的数据[^1]。然而，这种做法并不推荐用于常规开发中，因为这会破坏父子组件之间的解耦性。

#### 父组件向子组件传递数据的方式有哪些？

父组件可以使用 `props` 向子组件传递数据。在子组件内部定义 `props` 来接收这些参数，并可以在模板或其他地方正常使用它们[^2]。

// 父组件
<template>
  <ChildComponent :message="msg"/>
</template>

<script setup>
import { ref } from 'vue';
const msg = ref('Hello, child!');
</script>

// 子组件
<script setup>
defineProps({
  message: String,
});
</script>

#### 如何实现子组件向父组件发送消息？

子组件能够利用 `$emit` 方法触发自定义事件并携带额外的信息回传给父级组件。父组件监听该事件即可接收到相应的通知和数据。

<!-- Child Component -->
<button @click="$emit('customEvent', data)">Click me!</button>

<!-- Parent Component -->
<child-component @custom-event="(data) => handleCustomEvent(data)" />

#### 祖先与后代之间怎样共享状态？

对于跨越多层嵌套的情况，除了逐层透传外，还可以借助于全局状态管理工具 Vuex 或者 Composition API 提供的 provide/inject 功能来简化跨层级通信过程[^3]。

#### 兄弟组件间的交互模式是什么样的？

兄弟组件无法直接相互作用；通常的做法是引入共同上级作为中介来进行协调工作。即由其中一个兄弟发出请求至其最近公共祖先处处理后再反馈回去另一个兄弟那里[^4]。

#### 新增特性 `$attrs` 和 `v-bind` 的用途是什么？

从 Vue 2.4 开始支持的新属性 `$attrs` 包含了所有未被 prop 所声明绑定过的 attribute（包括 class/style），而 `v-bind="attrs"` 则允许我们将这部分多余的属性自动应用到指定的目标上。

<!-- GrandParent.vue -->
<template>
  <ParentComp someAttr="value">
    <!-- other content -->
  </ParentComp>
</template>

<!-- ParentComp.vue -->
<template>
  <ChildComp v-bind="$attrs"></ChildComp> <!-- Pass down all unclaimed attributes -->
</template>

vue父子组件通信面试题

Vue父子组件通信是Vue.js中常见的面试题之一。在Vue中，父子组件之间的通信可以通过props和$emit来实现。

1. 使用props进行父组件向子组件传递数据：
- 在父组件中，通过在子组件标签上绑定属性的方式传递数据，例如：<ChildComponent :propName="data"></ChildComponent>
- 在子组件中，通过props选项接收父组件传递的数据，例如：props: ['propName']

2. 使用$emit进行子组件向父组件传递数据：
- 在子组件中，通过this.$emit('eventName', data)触发一个自定义事件，并传递数据给父组件。
- 在父组件中，通过在子组件标签上监听自定义事件的方式接收子组件传递的数据，例如：<ChildComponent @eventName="handleEvent"></ChildComponent>
- 在父组件的methods选项中定义handleEvent方法来处理子组件传递的数据。

3. 使用$refs进行父组件访问子组件：
- 在父组件中，通过ref属性给子组件标记一个引用名，例如：<ChildComponent ref="child"></ChildComponent>
- 在父组件的methods选项中，可以通过this.$refs.child来访问子组件的属性和方法。