一、什么是v-model？
v-model是Vue.js中的一个指令，用于在表单元素上实现数据的双向绑定。简单来说，v-model可以让我们轻松地读取和更新数据，无需手动操作DOM。
二、标签选择器组件分析
我们先来看一下子组件的代码：
<template><el-selectv-model="tags"multiplefilterableallow-createdefault-first-option:reserve-keyword="false"placeholder="可输入添加标签"@change="updateTagsValue"><el-optionv-for="item in tagsList":key="item.ID":label="item.label":value="item.label"/></el-select>
</template>
在这个组件中，我们使用了Element UI的组件来实现多选标签功能。通过v-model指令，我们将tags变量与组件的值进行了双向绑定。
三、v-model在子组件中的应用
在子组件的
const emits = defineEmits(['blur', 'update:tags']);
const props = defineProps({tags: {type: Array,default: [],},
});
watch(() => props.tags,(vals) => {tags.value = vals;},{deep: true,immediate: true,}
);
这里，我们通过defineEmits定义了一个自定义事件update:tags，用于在子组件中更新tags的值。同时，我们通过defineProps接收父组件传递的tags数组。
当props.tags发生变化时，我们通过watch监听器将新的值赋给tags.value，从而实现数据的双向绑定。
四、v-model在父组件中的应用
在父组件中，我们这样使用标签选择器组件：
<TagSelector v-model:tags="formData.tags" />
这里的v-model:tags实际上是一个语法糖，它等同于：
<TagSelector :tags="formData.tags" @update:tags="formData.tags = $event" />
当子组件中的tags值发生变化时，会触发update:tags事件，并将新的值传递给父组件。父组件通过监听这个事件，更新formData.tags的值，从而实现数据的双向绑定。
五、完整示例
子组件：
<template><el-selectv-model="tags"multiplefilterableallow-createdefault-first-option:reserve-keyword="false"placeholder="可输入添加标签"@change="updateTagsValue"><el-optionv-for="item in tagsList":key="item.ID":label="item.label":value="item.label"/></el-select>
</template><script setup>
defineOptions({name: 'TagSelector',
});import { watch, ref, onMounted } from 'vue';
import { getTagList } from '@/api/code_quest/tag';const tagsList = ref([]);
const tags = ref([]);const emits = defineEmits(['blur', 'update:tags']);
const props = defineProps({tags: {type: Array,default: [],},
});onMounted(() => {updateTags();
});const updateTagsValue = (vals) => {emits('update:tags', vals);
};
const updateTags = async () => {const res = await getTagList({ pageSize: 9999 });if (res.code === 0) {tagsList.value = res.data.list;}
};watch(() => props.tags,(vals) => {tags.value = vals;},{deep: true,immediate: true,}
);
</script>
父组件使用：
<TagSelector v-model:tags="formData.tags" />
六、总结
通过本文的讲解，我们了解了v-model在Vue组件中的应用。利用v-model，我们可以轻松实现父子组件之间的数据双向绑定，提高代码的可维护性和简洁性。在实际开发中，掌握v-model的使用技巧对于提高开发效率具有重要意义。
