首页 > 试题广场 >

在Vue.js自定义组件中，为了实现类似原生input的双向

[单选题]

在Vue.js自定义组件中，为了实现类似原生input的双向数据绑定（使用v-model），开发者需要如何处理组件的props和事件？

在组件内定义一个本地data属性，并通过watch监控其变化

在组件内暴露一个value prop，并在用户交互时触发input事件

在组件内使用$emit直接修改父组件的数据

在组件内直接修改传入的prop，并触发change事件

查看答案及解析

风雪心

<!-- CustomInput.vue -->
<template>
  <!-- 直接绑定计算属性，无需手动监听事件 -->
  <input v-model="internalValue" />
</template>

<script>
export default {
  props: ['modelValue'],
  emits: ['update:modelValue'],
  computed: {
    internalValue: {
      get() {
        return this.modelValue; // 读取时返回 prop
      },
      set(value) {
        this.$emit('update:modelValue', value); // 修改时触发事件
      }
    }
  }
}
</script>

在子组件中不要直接修改父组件传递的props，而是将其传递给父组件进行修改。

发表于今天 15:18:34 回复(0)