Vue标签输入框通过$emit实现父子组件通信：子组件负责交互并触发add-tag/remove-tag事件，父组件响应事件更新tags数组；支持去重、非空校验、trim处理及逗号批量添加。
Vue 组件中实现标签输入框（Tag Input）通过 $emit 回传新增与删除的标签数组，核心是：父组件控制标签数据、子组件负责交互并触发事件通知变更。关键在于区分“新增”和“删除”两种操作，并确保每次变更都准确同步数组状态。
子组件：封装输入逻辑并 emit 变更
子组件维护本地输入值，但不直接修改标签列表；所有增删操作都通过 $emit 通知父组件处理。
- 用
v-model绑定输入框，按 Enter 或失去焦点时触发添加 - 每个标签旁放删除按钮，点击时 emit
remove-tag并传入该标签值 - 添加时 emit
add-tag，传入新标签字符串（需去重、非空校验） - 可选：添加后清空输入框，避免重复提交
父组件：响应事件并更新标签数组
父组件持有 tags 响应式数组，监听子组件 emit 的事件，分别做 push 或 filter 操作。
-
@add-tag="handleAdd"：检查是否已存在、是否为空，再push -
@remove-tag="handleRemove"：用filter移除指定值（注意：若标签有重复，可改用splice+indexOf删除第一个匹配项） - 推荐使用
ref或reactive管理 tags，确保响应式更新
双向绑定简化版（可选）
如果只需整体替换标签数组（比如编辑后统一提交），可用 v-model 实现双向绑定：
立即学习“前端免费学习笔记（深入）”；
- 子组件定义
modelValueprop 和update:modelValue事件 - 内部增删后调用
$emit('update:modelValue', newTags) - 父组件写
v-model="tags"即可自动同步 - 注意：这种方式适合“最终态同步”，不适合细粒度区分新增/删除场景
防错与体验细节
真实项目中容易忽略的点：
- 输入值 trim() 和空字符串过滤，避免生成空白标签
- 大小写敏感？是否允许重复？在父组件校验比子组件更可靠
- 删除时用
key绑定唯一标识（如:key="tag"），避免 Vue 列表渲染错乱 - 支持回车、逗号分隔批量添加（如输入“Vue,React,TS”后自动拆分）
