从DIY沉浸式光影装置到创意编程：打造家庭级星空投影系统
2026/7/29 16:34:52
1. Vue3 自定义 v-model 深度解析
双向数据绑定是 Vue 框架最核心的特性之一，而 v-model 则是实现这一特性的语法糖。在 Vue3 中，v-model 的底层实现和扩展能力都有了显著提升。理解其工作原理和自定义方法，是进阶 Vue 开发的必经之路。
传统表单元素如 input、select 等可以直接使用 v-model，这是因为 Vue 已经为这些元素内置了处理逻辑。但当我们需要在自定义组件中使用时，就需要手动实现对应的接口。Vue3 对此做了重要改进：一个组件现在可以支持多个 v-model 绑定，这为复杂组件的开发提供了极大便利。
重要提示：Vue3 中 v-model 默认使用的 prop 名称从 value 改为 modelValue，事件名称从 input 改为 update:modelValue。这个变化需要特别注意，特别是在从 Vue2 迁移项目时。
1.1 v-model 的本质剖析
很多人误以为 v-model 是某种"魔法"，其实它只是语法糖。以最常见的 input 元素为例：
<input v-model="message">等价于：
<input :value="message" @input="message = $event.target.value" >在组件层面，这种对应关系同样成立。当我们在一个自定义组件上使用 v-model 时：
<CustomInput v-model="message" />实际上会被编译为：
<CustomInput :modelValue="message" @update:modelValue="message = $event" />这种设计使得双向绑定的实现变得清晰明了。作为组件开发者，我们需要做两件事：
- 接收一个名为 modelValue 的 prop
- 在值变化时触发 update:modelValue 事件
2. 基础自定义 v-model 实现
让我们从一个最简单的自定义输入组件开始，逐步深入理解 v-model 的实现机制。
2.1 基本组件结构
创建一个基础的 CustomInput 组件：
<template> <input :value="modelValue" @input="$emit('update:modelValue', $event.target.value)" /> </template> <script> export default { props: ['modelValue'], emits: ['update:modelValue'] } </script>使用方式：
<template> <CustomInput v-model="message" /> <p>当前值：{{ message }}</p> </template> <script> import CustomInput from './CustomInput.vue' export default { components: { CustomInput }, data() { return { message: '' } } } </script>这个简单示例展示了自定义 v-model 的核心要点：
- 组件通过 modelValue prop 接收父组件传递的值
- 当内部值变化时，通过 $emit 触发 update:modelValue 事件
- 父组件通过 v-model 实现双向绑定
2.2 处理复杂数据类型
上面的例子处理的是字符串类型，但当我们需要处理对象等复杂类型时，需要特别注意引用问题。例如，实现一个颜色选择器组件：
<template> <div> <input type="range" min="0" max="255" :value="modelValue.r" @input="updateColor('r', $event.target.value)" > <!-- 类似的 g 和 b 通道 --> </div> </template> <script> export default { props: ['modelValue'], emits: ['update:modelValue'], methods: { updateColor(channel, value) { const newColor = {...this.modelValue, [channel]: parseInt(value)} this.$emit('update:modelValue', newColor) } } } </script>使用时：
<template> <ColorPicker v-model="color" /> </template> <script> export default { data() { return { color: { r: 0, g: 0, b: 0 } } } } </script>关键技巧：对于对象类型的 modelValue，应该始终创建新对象而不是直接修改原对象，以确保 Vue 的响应式系统能够正确追踪变化。
3. 高级 v-model 用法
Vue3 对 v-model 进行了重大增强，支持了更多高级特性，让组件开发更加灵活。
3.1 多个 v-model 绑定
Vue3 允许一个组件有多个 v-model 绑定，这在表单类组件中特别有用。例如，实现一个用户信息表单组件：
<template> <div> <input :value="firstName" @input="$emit('update:firstName', $event.target.value)" > <input :value="lastName" @input="$emit('update:lastName', $event.target.value)" > </div> </template> <script> export default { props: ['firstName', 'lastName'], emits: ['update:firstName', 'update:lastName'] } </script>使用时可以通过参数指定绑定的属性：
<template> <UserForm v-model:firstName="user.firstName" v-model:lastName="user.lastName" /> </template>3.2 自定义修饰符
v-model 支持自定义修饰符，这为组件提供了额外的配置能力。例如，实现一个自动大写的输入框：
<template> <input :value="modelValue" @input="handleInput" /> </template> <script> export default { props: { modelValue: String, modelModifiers: { type: Object, default: () => ({}) } }, emits: ['update:modelValue'], methods: { handleInput(e) { let value = e.target.value if (this.modelModifiers.capitalize) { value = value.charAt(0).toUpperCase() + value.slice(1) } this.$emit('update:modelValue', value) } } } </script>使用时添加修饰符：
<template> <CapitalizedInput v-model.capitalize="name" /> </template>3.3 v-model 与组合式 API
在组合式 API 中，v-model 的使用同样直观。下面是一个使用 setup 语法实现的计数器组件：
<template> <button @click="decrement">-</button> <span>{{ modelValue }}</span> <button @click="increment">+</button> </template> <script> import { defineComponent } from 'vue' export default defineComponent({ props: ['modelValue'], emits: ['update:modelValue'], setup(props, { emit }) { const increment = () => { emit('update:modelValue', props.modelValue + 1) } const decrement = () => { emit('update:modelValue', props.modelValue - 1) } return { increment, decrement } } }) </script>4. 实战案例：实现一个增强型选择器
让我们通过一个完整的实战案例，综合运用各种 v-model 技巧。我们将实现一个支持搜索、多选和自定义渲染的选择器组件。
4.1 组件基础结构
<template> <div class="enhanced-select"> <div class="selected-items"> <span v-for="item in selectedItems" :key="item.value"> {{ item.label }} <button @click="removeItem(item)">×</button> </span> <input type="text" v-model="searchText" @focus="showDropdown = true" placeholder="搜索..." /> </div> <div v-if="showDropdown" class="dropdown"> <div v-for="item in filteredOptions" :key="item.value" @click="toggleItem(item)" > {{ item.label }} </div> </div> </div> </template> <script> import { defineComponent, ref, computed } from 'vue' export default defineComponent({ props: { modelValue: { type: Array, default: () => [] }, options: { type: Array, required: true }, multiple: { type: Boolean, default: false } }, emits: ['update:modelValue'], setup(props, { emit }) { const searchText = ref('') const showDropdown = ref(false) const filteredOptions = computed(() => { return props.options.filter(option => option.label.toLowerCase().includes(searchText.value.toLowerCase()) ) }) const selectedItems = computed(() => { return props.options.filter(option => props.modelValue.includes(option.value) ) }) const toggleItem = (item) => { let newValue if (props.multiple) { newValue = props.modelValue.includes(item.value) ? props.modelValue.filter(v => v !== item.value) : [...props.modelValue, item.value] } else { newValue = [item.value] showDropdown.value = false } emit('update:modelValue', newValue) } const removeItem = (item) => { emit('update:modelValue', props.modelValue.filter(v => v !== item.value) ) } return { searchText, showDropdown, filteredOptions, selectedItems, toggleItem, removeItem } } }) </script> <style scoped> .enhanced-select { position: relative; border: 1px solid #ccc; padding: 5px; border-radius: 4px; } .selected-items { display: flex; flex-wrap: wrap; gap: 5px; } .dropdown { position: absolute; top: 100%; left: 0; right: 0; max-height: 200px; overflow-y: auto; border: 1px solid #ccc; background: white; z-index: 100; } .dropdown div { padding: 5px; cursor: pointer; } .dropdown div:hover { background: #f0f0f0; } </style>4.2 组件使用示例
<template> <EnhancedSelect v-model="selectedValues" :options="options" multiple /> <EnhancedSelect v-model="singleValue" :options="options" /> </template> <script> import EnhancedSelect from './EnhancedSelect.vue' export default { components: { EnhancedSelect }, data() { return { options: [ { value: 'vue', label: 'Vue.js' }, { value: 'react', label: 'React' }, { value: 'angular', label: 'Angular' }, { value: 'svelte', label: 'Svelte' } ], selectedValues: [], singleValue: [] } } } </script>5. 性能优化与最佳实践
在实际项目中使用自定义 v-model 时，有几个关键点需要注意以确保最佳性能和开发体验。
5.1 避免不必要的重新渲染
当 modelValue 是对象或数组时，不当的处理可能导致组件不必要的重新渲染。考虑以下优化：
<script> export default { props: { modelValue: { type: Object, default: () => ({}), // 深度比较对象内容 deep: true } }, // 使用计算属性基于 modelValue 派生状态 computed: { normalizedValue() { return { ...this.modelValue, // 添加一些派生属性 } } } } </script>5.2 提供良好的 TypeScript 支持
如果项目使用 TypeScript，为 v-model 提供正确的类型定义非常重要：
<script lang="ts"> import { defineComponent, PropType } from 'vue' interface Color { r: number g: number b: number } export default defineComponent({ props: { modelValue: { type: Object as PropType<Color>, required: true }, modelModifiers: { type: Object as PropType<{ capitalize?: boolean }>, default: () => ({}) } }, emits: { 'update:modelValue': (payload: Color) => true } }) </script>5.3 表单验证集成
自定义组件应该能够无缝集成到表单验证生态中。以下是与 VeeValidate 集成的示例：
<template> <input :value="modelValue" @input="handleInput" @blur="$emit('blur')" /> <span v-if="errorMessage">{{ errorMessage }}</span> </template> <script> import { useField } from 'vee-validate' export default { props: ['modelValue', 'name'], emits: ['update:modelValue', 'blur'], setup(props) { const { errorMessage, handleChange } = useField(props.name) return { errorMessage, handleChange } }, methods: { handleInput(e) { this.$emit('update:modelValue', e.target.value) this.handleChange(e.target.value) } } } </script>6. 常见问题与解决方案
在实际开发中，我们可能会遇到各种与自定义 v-model 相关的问题。下面是一些典型场景及其解决方案。
6.1 组件内部需要修改 prop 值
有时我们可能需要在组件内部修改接收到的 modelValue。正确的做法是使用计算属性的 getter/setter：
<script> export default { props: ['modelValue'], emits: ['update:modelValue'], computed: { internalValue: { get() { return this.modelValue }, set(value) { this.$emit('update:modelValue', value) } } } } </script>6.2 处理异步更新
当 modelValue 的更新涉及异步操作时，需要特别注意执行顺序：
<script> export default { methods: { async handleInput(e) { const newValue = e.target.value // 执行一些异步验证 const isValid = await validateValue(newValue) if (isValid) { this.$emit('update:modelValue', newValue) } } } } </script>6.3 调试 v-model 问题
当 v-model 行为不符合预期时，可以添加调试信息：
<script> export default { props: ['modelValue'], watch: { modelValue(newVal, oldVal) { console.log('modelValue changed:', oldVal, '→', newVal) } }, mounted() { console.log('Initial modelValue:', this.modelValue) } } </script>6.4 与第三方库集成
将自定义 v-model 与第三方库（如日期选择器）集成：
<template> <flat-pickr :value="modelValue" @input="handleDateChange" /> </template> <script> import flatPickr from 'vue-flatpickr-component' export default { components: { flatPickr }, props: ['modelValue'], emits: ['update:modelValue'], methods: { handleDateChange(dates) { this.$emit('update:modelValue', dates[0]) } } } </script>7. 进阶技巧与模式
掌握了基础用法后，让我们探索一些更高级的 v-model 应用模式。
7.1 链式 v-model
通过嵌套组件传递 v-model，实现深层数据绑定：
<!-- ParentComponent.vue --> <template> <ChildComponent v-model="user" /> </template> <!-- ChildComponent.vue --> <template> <GrandChildComponent v-model="modelValue.address" /> </template> <script> export default { props: ['modelValue'], emits: ['update:modelValue'] } </script> <!-- GrandChildComponent.vue --> <template> <input v-for="(value, key) in modelValue" :key="key" :value="value" @input="$emit('update:modelValue', {...modelValue, [key]: $event.target.value})" /> </template>7.2 状态提升模式
对于需要在多个组件间共享的状态，可以使用状态提升配合 v-model：
<!-- App.vue --> <template> <ComponentA v-model="sharedState" /> <ComponentB v-model="sharedState" /> </template> <!-- ComponentA.vue --> <template> <input v-model="internalValue.propA" /> </template> <script> export default { props: ['modelValue'], computed: { internalValue: { get() { return this.modelValue }, set(val) { this.$emit('update:modelValue', val) } } } } </script> <!-- ComponentB.vue --> <template> <input v-model="internalValue.propB" /> </template>7.3 受控与非受控组件
结合 v-model 实现受控/非受控组件模式：
<script> export default { props: { modelValue: String, defaultValue: String }, data() { return { // 如果父组件没有提供 modelValue，使用内部状态 internalValue: this.modelValue ?? this.defaultValue } }, watch: { modelValue(newVal) { if (newVal !== undefined) { this.internalValue = newVal } } }, methods: { handleInput(e) { this.internalValue = e.target.value if (this.modelValue !== undefined) { this.$emit('update:modelValue', this.internalValue) } } } } </script>8. 测试自定义 v-model 组件
确保自定义 v-model 行为正确的测试策略。
8.1 单元测试示例
使用 Vue Test Utils 测试 v-model 行为：
import { mount } from '@vue/test-utils' import CustomInput from './CustomInput.vue' test('emits update event when input changes', async () => { const wrapper = mount(CustomInput, { props: { modelValue: 'initial' } }) const input = wrapper.find('input') await input.setValue('new value') expect(wrapper.emitted('update:modelValue')).toBeTruthy() expect(wrapper.emitted('update:modelValue')[0]).toEqual(['new value']) })8.2 测试多个 v-model
测试支持多个 v-model 的组件：
test('handles multiple v-models', async () => { const wrapper = mount(UserForm, { props: { firstName: 'John', lastName: 'Doe' } }) const firstNameInput = wrapper.findAll('input')[0] await firstNameInput.setValue('Jane') expect(wrapper.emitted('update:firstName')[0]).toEqual(['Jane']) expect(wrapper.emitted('update:lastName')).toBeFalsy() })8.3 测试修饰符
验证修饰符是否正常工作：
test('capitalize modifier works', async () => { const wrapper = mount(CapitalizedInput, { props: { modelValue: '', modelModifiers: { capitalize: true } } }) const input = wrapper.find('input') await input.setValue('hello') expect(wrapper.emitted('update:modelValue')[0]).toEqual(['Hello']) })9. 与其他 Vue 特性结合
v-model 可以与其他 Vue 特性协同工作，实现更强大的功能。
9.1 与 provide/inject 结合
在深层嵌套组件中使用 provide/inject 传递 v-model：
<!-- ParentComponent.vue --> <template> <MiddleComponent v-model="value" /> </template> <script> import { provide, ref } from 'vue' export default { setup() { const value = ref('') provide('parentValue', { value, setValue: newValue => { value.value = newValue } }) return { value } } } </script> <!-- DeepChildComponent.vue --> <script> import { inject } from 'vue' export default { setup() { const { value, setValue } = inject('parentValue') const handleInput = (e) => { setValue(e.target.value) } return { value, handleInput } } } </script>9.2 与 Teleport 结合
将自定义组件的部分内容渲染到 DOM 的其他位置：
<template> <div> <input :value="modelValue" @input="$emit('update:modelValue', $event.target.value)" /> <Teleport to="body"> <div v-if="showDropdown" class="dropdown"> <!-- 下拉内容 --> </div> </Teleport> </div> </template>9.3 与 Suspense 结合
处理异步数据加载场景：
<template> <Suspense> <template #default> <AsyncComponent v-model="asyncData" /> </template> <template #fallback> <div>Loading...</div> </template> </Suspense> </template> <script> const AsyncComponent = defineAsyncComponent({ loader: () => import('./AsyncComponent.vue') }) </script>10. 从 Vue2 迁移到 Vue3
对于从 Vue2 升级的项目，v-model 相关的变化需要特别注意。
10.1 主要变化点
Prop/Event 名称变更：
- Vue2: value prop + input event
- Vue3: modelValue prop + update:modelValue 事件
多个 v-model 支持： Vue3 允许一个组件有多个 v-model 绑定
自定义修饰符处理： Vue3 通过 modelModifiers prop 传递修饰符
10.2 迁移策略
对于简单组件，可以使用兼容写法：
<script> export default { props: { // Vue2 兼容 value: String, // Vue3 新写法 modelValue: { type: String, default: '' } }, emits: ['input', 'update:modelValue'], computed: { internalValue: { get() { return this.modelValue ?? this.value }, set(value) { this.$emit('update:modelValue', value) this.$emit('input', value) } } } } </script>10.3 迁移工具
Vue CLI 的官方迁移工具可以帮助自动转换部分 v-model 相关代码：
vue-cli-service migrate --plugin v-model对于复杂场景，可能需要手动调整：
// 之前 (Vue2) this.$emit('input', newValue) // 之后 (Vue3) this.$emit('update:modelValue', newValue)11. 性能优化进阶
深入探讨自定义 v-model 组件的高级性能优化技巧。
11.1 延迟更新策略
对于高频更新的场景（如拖拽、实时输入），可以使用防抖控制更新频率：
<script> import { debounce } from 'lodash-es' export default { created() { this.debouncedEmit = debounce(value => { this.$emit('update:modelValue', value) }, 300) }, methods: { handleInput(e) { this.debouncedEmit(e.target.value) } } } </script>11.2 选择性更新
当只有部分属性变化时，避免触发不必要的更新：
<script> export default { methods: { updateSpecificField(field, value) { if (this.modelValue[field] !== value) { this.$emit('update:modelValue', { ...this.modelValue, [field]: value }) } } } } </script>11.3 虚拟滚动集成
对于大型列表的 v-model 绑定，结合虚拟滚动提升性能：
<template> <VirtualList :size="40" :remain="8" :data="largeList" v-model="selectedItems" > <template #default="{ item, index }"> <div @click="toggleSelection(item)"> {{ item.name }} </div> </template> </VirtualList> </template>12. 设计可维护的 v-model 组件
构建易于维护和扩展的自定义 v-model 组件的最佳实践。
12.1 清晰的接口设计
为组件定义明确的 prop 接口：
<script> export default { props: { modelValue: { type: [String, Number], required: true, validator: value => { // 自定义验证逻辑 return typeof value === 'string' ? value.length <= 100 : value >= 0 && value <= 100 } }, // 其他辅助属性 disabled: { type: Boolean, default: false } } } </script>12.2 完善的文档注释
使用 JSDoc 提供详细的组件文档：
<script> /** * 增强型输入组件 * @vmodel {string|number} - 绑定的值 * @vmodel:format {string} [currency] - 格式化类型 * @modifier trim - 自动去除首尾空格 */ export default { props: { /** 绑定的值 */ modelValue: [String, Number], /** 格式化选项 */ format: { type: String, default: 'text' } } } </script>12.3 组件组合模式
通过组合简单组件构建复杂功能：
<template> <div class="complex-input"> <TextInput v-model="textValue" placeholder="输入文本" /> <NumberInput v-model="numberValue" :min="0" :max="100" /> <ToggleInput v-model="toggleValue" label="启用" /> </div> </template> <script> export default { props: ['modelValue'], computed: { textValue: { get() { return this.modelValue.text }, set(val) { this.updateModel('text', val) } }, numberValue: { get() { return this.modelValue.number }, set(val) { this.updateModel('number', val) } }, toggleValue: { get() { return this.modelValue.toggle }, set(val) { this.updateModel('toggle', val) } } }, methods: { updateModel(field, value) { this.$emit('update:modelValue', { ...this.modelValue, [field]: value }) } } } </script>13. 生态系统集成
将自定义 v-model 组件与 Vue 生态系统中的流行工具集成。
13.1 与 Vuex 配合使用
在 Vuex 中使用自定义 v-model 组件：
<template> <CustomInput :modelValue="value" @update:modelValue="updateValue" /> </template> <script> import { mapState, mapMutations } from 'vuex' export default { computed: { ...mapState(['value']) }, methods: { ...mapMutations(['setValue']), updateValue(newValue) { this.setValue(newValue) } } } </script>13.2 与 Pinia 集成
在 Pinia store 中使用：
<template> <CustomInput v-model="store.value" /> </template> <script> import { useMainStore } from '@/stores/main' export default { setup() { const store = useMainStore() // Pinia 的 store 属性已经是响应式的 // 可以直接用 v-model 绑定 return { store } } } </script>13.3 与 Vue Router 结合
在路由变化时保持状态：
<script> export default { props: ['modelValue'], watch: { '$route.query': { immediate: true, handler(query) { if (query.value) { this.$emit('update:modelValue', query.value) } } }, modelValue(value) { // 更新 URL 但不触发导航 this.$router.replace({ query: { ...this.$route.query, value } }) } } } </script>14. 无障碍访问支持
确保自定义 v-model 组件具有良好的无障碍访问特性。
14.1 ARIA 属性支持
为自定义输入组件添加适当的 ARIA 属性：
<template> <div role="textbox" :aria-valuenow="modelValue" :aria-valuetext="displayValue" tabindex="0" @keydown="handleKeyDown" > {{ displayValue }} </div> </template> <script> export default { props: ['modelValue'], computed: { displayValue() { return `当前值: ${this.modelValue}` } }, methods: { handleKeyDown(e) { if (e.key === 'ArrowUp') { this.$emit('update:modelValue', this.modelValue + 1) } else if (e.key === 'ArrowDown') { this.$emit('update:modelValue', this.modelValue - 1) } } } } </script>14.2 键盘导航支持
确保组件可以通过键盘完全操作：
<script> export default { methods: { handleKeyDown(e) { switch (e.key) { case 'Enter': this.confirmSelection() break case 'Escape': this.closeDropdown() break case 'ArrowUp': this.moveSelection(-1) break case 'ArrowDown': this.moveSelection(1) break } } } } </script>14.3 焦点管理
正确处理组件内外的焦点转移：
<script> export default { methods: { openDropdown() { this.showDropdown = true this.$nextTick(() => { this.$refs.dropdown.focus() }) }, closeDropdown() { this.showDropdown = false this.$refs.trigger.focus() } } } </script>15. 移动端适配
针对移动设备的特殊考虑和优化。
15.1 触摸事件处理
为触摸设备添加支持：
<template> <div @touchstart="handleTouchStart" @touchmove="handleTouchMove" @touchend="handleTouchEnd" > <!-- 滑动选择器内容 --> </div> </template> <script> export default { methods: { handleTouchStart(e) { this.touchStartX = e.touches[0].clientX }, handleTouchMove(e) { const deltaX = e.touches[0].clientX - this.touchStartX const newValue = this.calculateValueFromDelta(deltaX) this.$emit('update:modelValue', newValue) } } } </script>15.2 虚拟键盘优化
针对不同输入类型优化虚拟键盘：
<template> <input :type="inputType" :value="modelValue" @input="$emit('update:modelValue', $event.target.value)" /> </template> <script> export default { props: { modelValue: [String, Number], inputType: { type: String, default: 'text', validator: value => [ 'text', 'number', 'email', 'tel', 'url' ].includes(value) } } } </script>15.3 手势支持
添加常见手势操作：
<script> export default { methods: { handleSwipe(direction) { if (direction === 'left') { this.$emit('update:modelValue', this.modelValue - 1) } else if (direction === 'right') { this.$emit('update:modelValue', this.modelValue + 1) } } } } </script>16. 服务端渲染考虑
在 SSR 环境下使用自定义 v-model 组件的注意事项。
16.1 客户端特定代码处理
确保只在客户端执行特定代码：
<script> export default { mounted() { // 只在客户端执行的代码 if (typeof window !== 'undefined') { this.loadClientSpecificLibrary() } } } </script>16.2 数据序列化
处理复杂 modelValue 的序列化：
<script> export default { props: { modelValue: { type: [Object, String], default: () => ({}), // 确保从字符串正确解析 validator(value) { try { if (typeof value === 'string') { JSON.parse(value) } return true } catch { return false } } } }, computed: { parsedValue() { return typeof this.modelValue === 'string' ? JSON.parse(this.modelValue) : this.modelValue } } } </script>16.3 水合不匹配避免
确保服务器和客户端渲染结果一致：
<script> export default { data() { return { // 根据环境初始化数据 localValue: typeof window === 'undefined' ? this.modelValue : this.loadFromLocalStorage() || this.modelValue } } } </script>17. 微前端集成
在微前端架构中使用自定义 v-model 组件。
17.1 跨应用通信
通过自定义事件实现跨应用 v-model：
<script> export default { mounted() { // 监听父应用事件 window.addEventListener('parent-model-update', (event) => { this.$emit('update:modelValue', event.detail.value) }) }, methods: { notifyParent(newValue) { // 通知父应用 const event = new CustomEvent('child-model-update', { detail: { value: newValue } }) window.dispatchEvent(event) } } } </script>17.2 共享组件库
通过模块联邦共享 v-model 组件：
// webpack.config.js new ModuleFederationPlugin({ name: 'componentLibrary', exposes: { './CustomInput': './src/components/CustomInput.vue' } })17.3 样式隔离
确保组件样式不影响其他应用：
<style scoped> /* 使用 scoped 样式 */ .input { /* 组件特定样式 */ } </style>18. 安全考虑
实现安全的自定义 v-model 组件。
18.1 XSS 防护
对输入值进行转义处理：
<script> import DOMPurify from 'dompurify' export default { methods: { sanitizeInput(value) { return DOMPurify.sanitize(value) }, handleInput(e) { const cleanValue = this.sanitizeInput(e.target.value) this.$emit('update:modelValue', cleanValue) } } } </script>18.2 输入验证
添加严格的输入验证：
<script> export default { props: { modelValue: { type: String, validator(value) { // 只允许字母数字