Vue 进阶面试题, 如果 Vue 给组件绑定自定义事件无效,如何解决?

Step 1

Q:: 可能的面试题

A:: 在 Vue 中给组件绑定自定义事件无效时，应该如何解决？

Step 1

Q:: 对应的答案

A:: 当 Vue 组件中的自定义事件绑定无效时，通常有以下几种可能原因： 1. 确保自定义事件已经在子组件中正确地通过 $emit 发出。例如，在子组件中，应该使用 this.$emit('eventName') 发出事件。 2. 检查父组件是否正确地监听了该事件。父组件应在子组件的使用处通过 v-on:eventName 或 @eventName 绑定监听器。 3. 确保事件名称正确一致。自定义事件的名称是区分大小写的，需要确保父子组件中使用的事件名称完全一致。 4. 检查 Vue 版本。Vue 2.x 和 Vue 3.x 在事件绑定上有些差异，确保按照正确的版本来写代码。 5. 如果使用了 $listeners 或 $attrs，确认没有被覆盖或未被正确传递。 6. 如果是非原生 DOM 事件，不要使用 .native 修饰符。

Step 2

Q:: 可能的面试题

A:: Vue 中如何正确地使用 $emit 传递参数？

Step 2

Q:: 对应的答案

A:: 在 Vue 中使用 $emit 可以传递多个参数。例如：this.$emit('eventName', param1, param2)。父组件在监听该事件时，监听函数会接收到这些参数：<child-component @eventName='handleEvent'/>，handleEvent 方法将接收 param1 和 param2。确保参数的顺序和类型正确无误。

Step 3

Q:: 可能的面试题

A:: Vue 3 中 v-model 在自定义组件中的使用与 Vue 2 有何不同？

Step 3

Q:: 对应的答案

A:: 在 Vue 2 中，v-model 默认绑定 value 属性并监听 input 事件。而在 Vue 3 中，可以在自定义组件中通过 modelValue 和 @update:modelValue 来实现双向绑定。这使得 v-model 的灵活性更高，可以自定义绑定的属性名和事件名。

Step 4

Q:: 可能的面试题

A:: 如何在 Vue 中监听父组件传递的属性变化？

Step 4

Q:: 对应的答案

A:: 在 Vue 中可以通过 watch 来监听父组件传递的 props 的变化。watch: { propName(newVal, oldVal) { // 处理逻辑 }}。这样可以在属性变化时进行相应的处理，确保组件在接收到新的属性值时能正确更新状态。