在 Vue 3 中封装一个支持双向绑定的组件

在 Vue 3 中封装一个支持双向绑定的组件，需遵循以下规范和实现步骤。以下以自定义输入框组件为例：

---

一、组件封装规范

1. 命名规范
   组件文件名使用大驼峰命名（如 MyInput.vue），确保可维护性。

2. 类型定义
   使用 TypeScript 定义明确的 Props 和 Emits 类型，避免运行时错误。

3. 单向数据流原则
   通过 defineProps 接收父组件数据，通过 defineEmits 通知父组件更新，禁止直接修改 Props。

---

二、完整代码实现

<!-- MyInput.vue -->
<template>
  <div class="custom-input">
    <input
      :value="innerValue"
      @input="handleInput"
      :placeholder="placeholder"
      class="input-field"
    />
  </div>
</template>

<script setup lang="ts">
import { computed, defineProps, defineEmits } from 'vue';

// 类型定义
interface Props {
  modelValue?: string;    // 双向绑定值
  placeholder?: string;   // 输入框占位符
}

// 接收父组件传递的 props
const props = defineProps<Props>();

// 定义 emit 事件
const emit = defineEmits(['update:modelValue']);

// 计算属性实现双向绑定
const innerValue = computed({
  get: () => props.modelValue || '',
  set: (value: string) => emit('update:modelValue', value)
});

// 处理输入事件
const handleInput = (event: Event) => {
  const target = event.target as HTMLInputElement;
  innerValue.value = target.value;
};
</script>

<style scoped>
.custom-input {
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.input-field {
  width: 100%;
  padding: 8px;
  border: none;
  outline: none;
}
</style>

---

三、关键实现解析

1. 双向绑定核心
   使用 computed 属性创建 innerValue，其 getter 返回 modelValue，setter 触发 update:modelValue 事件。这确保内部状态与父组件同步。

2. 类型安全
   通过 TypeScript 接口明确定义 modelValue 和 placeholder 的类型，提升代码健壮性。

3. 事件处理
   监听输入框的 input 事件，更新 innerValue 的值，自动触发父组件的更新。

---

四、组件使用示例

<!-- 父组件 -->
<template>
  <MyInput v-model="inputText" placeholder="请输入内容" />
  <p>当前输入值：{{ inputText }}</p>
</template>

<script setup>
import { ref } from 'vue';
import MyInput from './MyInput.vue';

const inputText = ref(''); // 双向绑定数据
</script>

---

五、高级扩展场景

1. 多值绑定
   支持多个 v-model 绑定（如同时绑定值和状态）：

   <!-- 父组件 -->
   <MyInput 
     v-model:value="inputText" 
     v-model:status="inputStatus" 
   />
   
   <!-- 子组件 -->
   <script setup>
   const emit = defineEmits(['update:value', 'update:status']);
   // 定义对应计算属性...
   </script>
   

2. 复杂对象绑定
   将 modelValue 定义为对象类型，实现深层属性更新：

   interface Props {
     modelValue?: { text: string; isValid: boolean };
   }
   

3. 自定义修饰符
   通过 defineEmits 支持 .trim、.number 等修饰符逻辑：

   // 在 emit 时处理修饰符逻辑
   set: (value: string) => emit('update:modelValue', value.trim())
   

---

六、最佳实践建议

1. 样式隔离
   使用 <style scoped> 或 CSS Modules，避免样式污染。

2. 可访问性
   为输入框添加 aria-label 或关联 <label> 元素，提升无障碍体验。

3. 性能优化
   对高频输入场景使用 debounce（防抖）优化性能：

   import { debounce } from 'lodash-es';
   
   const debouncedEmit = debounce((value: string) => {
     emit('update:modelValue', value);
   }, 300);
   
   // 在 handleInput 中调用 debouncedEmit
   

---

该实现严格遵循 Vue 3 双向绑定规范，通过计算属性提供高效的响应式更新，适用于表单输入、自定义控件等场景。大家可根据需求扩展验证逻辑、自定义事件等功能。