打工人的日常，白天对着代码敲敲打打，晚上还要担心被裁员、找不到好工作，尤其是前端工程师，面试这一关简直就是 “拦路虎”。今天就来给大家分享一道 Vue 类的前端高频面试题，帮你轻松应对面试，离大厂 offer 更进一步！

令人头疼的面试题来了

很多小伙伴在面试前端岗位的时候，经常会被问到这样一个问题：在 Vue 中，父子组件之间是如何进行通信的？ 这道题看似简单，可要是回答得不够全面、不够深入，很容易就被面试官 “挑刺”，与心仪的工作擦肩而过。别着急，咱们慢慢拆解，把这个问题吃透！

有的朋友可能第一反应就是 props 和 $emit，确实，这是最常用的父子组件通信方式。但 Vue 的通信方式可不止这一种，要是只答这两个，面试官可能会觉得你掌握得不够扎实。接下来，咱们就把所有常见的父子组件通信方式都掰开来、揉碎了讲清楚。

多种父子组件通信方式详解

1. props 与 $emit

props 就像是爸爸给儿子传递东西的小口袋，父组件可以通过它把数据传给子组件。而 $emit 呢，就好比儿子给爸爸传递消息的小喇叭，子组件可以用它向父组件发送事件。

// 父组件
<template>
<div>
<!-- 父组件通过props传递数据给子组件 -->
<child :message="parentMessage"></child>
</div>
</template>
<script>
import Child from './Child.vue';
export default {
components: {
Child
},
data() {
return {
parentMessage: '来自父组件的消息'
};
}
};
</script>
// 子组件
<template>
<div>
<p>{{ message }}</p>
<!-- 子组件通过$emit触发事件，向父组件传递数据 -->
<button @click="sendMessage">发送消息给父组件</button>
</div>
</template>
<script>
export default {
props: ['message'],
methods: {
sendMessage() {
this.$emit('childEvent', '来自子组件的回复');
}
}
};
</script>
// 在父组件中监听子组件的事件
<template>
<div>
<child :message="parentMessage" @childEvent="handleChildEvent"></child>
</div>
</template>
<script>
import Child from './Child.vue';
export default {
components: {
Child
},
data() {
return {
parentMessage: '来自父组件的消息'
};
},
methods: {
handleChildEvent(data) {
console.log(data); // 输出：来自子组件的回复
}
}
};
</script>

2. ref 与 parent / children

ref 就像是给组件贴的专属小标签，通过它可以在父组件中直接访问子组件的实例，进而调用子组件的方法或访问子组件的数据。而 parent 和 children 则是用来访问父组件和子组件实例的属性，不过使用 $children 要注意，它得到的是一个包含所有子组件实例的数组，需要小心索引。

// 父组件
<template>
<div>
<child ref="myChild"></child>
<button @click="callChildMethod">调用子组件方法</button>
</div>
</template>
<script>
import Child from './Child.vue';
export default {
components: {
Child
},
methods: {
callChildMethod() {
// 通过ref获取子组件实例，并调用子组件方法
this.$refs.myChild.childMethod();
}
}
};
</script>
// 子组件
<template>
<div>
<p>这是子组件</p>
</div>
</template>
<script>
export default {
methods: {
childMethod() {
console.log('子组件方法被调用');
}
}
};
</script>

3. EventBus（事件总线）

EventBus 就像一个公共的 “消息中转站”，不管是父子组件，还是其他关系的组件，都可以往这个中转站发送消息，也可以从中转站接收消息。不过在 Vue 3 中，官方更推荐使用 mitt 或 pinia 来实现类似功能。

// 创建一个EventBus
import Vue from 'vue';
export const eventBus = new Vue();
// 发送消息的组件
import { eventBus } from './eventBus.js';
export default {
methods: {
sendMessage() {
eventBus.$emit('customEvent', '这是通过EventBus发送的消息');
}
}
};
// 接收消息的组件
import { eventBus } from './eventBus.js';
export default {
created() {
eventBus.$on('customEvent', (data) => {
console.log(data); // 输出：这是通过EventBus发送的消息
});
}
};

面试官提问，这样回答就对了！

当面试官问 “在 Vue 中，父子组件之间是如何进行通信的？” 时，你可以这样回答：“在 Vue 中，父子组件通信有多种方式。最常用的是 props 和emit，props用于父组件向子组件传递数据，emit 用于子组件向父组件发送事件 。除此之外，还可以使用 ref 和parent/children，通过 ref 在父组件中直接访问子组件实例，进而操作子组件 ；而parent和children 则可以用来访问父组件和子组件的实例。另外，EventBus 也是一种通信方式，它就像一个公共的消息中转站，能实现组件间的消息传递，不过在 Vue 3 中更推荐使用 mitt 或 pinia 。”

现在前端技术更新换代特别快，新的框架、新的通信方式不断涌现。有人觉得把这些 Vue 父子组件通信方式都掌握好，面试就稳了；也有人认为，与其花大量时间研究这些基础通信方式，不如多去学习 Vue 3 的新特性和组合式 API。那么问题来了，你觉得在准备前端面试时，是深入研究这些传统的父子组件通信方式重要，还是紧跟技术潮流学习新特性更重要呢？快来评论区分享你的看法，大家一起讨论讨论！