Vue 进阶面试题, Vue 中 v-model 可以用于自定义组件吗?如何实现?
Vue 进阶面试题, Vue 中 v-model 可以用于自定义组件吗?如何实现?
QA
Step 1
Q:: Vue 中 v-model 可以用于自定义组件吗？如何实现？
A:: 是的，Vue 中 v-model 可以用于自定义组件。v-model 本质上是语法糖，它将 prop 和事件结合在一起，用于实现双向数据绑定。对于自定义组件，可以通过定义一个 value prop 和触发 input 事件来实现。例如：
<template>
<input :value="value" @input="$emit('input', $event.target.value)" />
</template>
<script>
export default {
props: ['value']
};
</script>
这样，父组件就可以使用 v-model 来绑定数据了。
Step 2
Q:: 如何自定义 v-model 的 prop 和事件名称？
A:: 在 Vue 3 中，v-model 支持自定义 prop 和事件名称。可以通过 model 选项或 modelValue prop 来实现。例如：
<template>
<input :checked="modelValue" @change="$emit('update:modelValue', $event.target.checked)" />
</template>
<script>
export default {
props: {
modelValue: Boolean
}
};
</script>
这样，父组件可以使用 v-model:checked 来绑定数据。
用途
面试这个内容的原因在于 v`-model 是 Vue 中实现双向数据绑定的核心机制。了解如何在自定义组件中使用 v-model，对于开发复杂的、可复用的组件是非常重要的。在实际生产环境中，当需要构建具有用户输入功能的自定义组件时（如表单组件、开关按钮等），需要使用 v-`model 来实现数据的双向绑定，从而简化数据管理和提高组件的易用性。\n相关问题
🦆
什么是 Vue 中的单向数据流?▷
🦆
Vue 中的 computed 和 watch 有什么区别?▷
🦆
Vue 中的 $emit 是什么?▷
🦆
如何在 Vue 中处理父子组件通信?▷