useVModel
实现多重嵌套组件数据的双向绑定
使用场景
通常遇到以下情况是需要这样写的
但是这种写法，会带来比如 组件嵌套层级过深，代码难以维护 等问题
vue
<script setup lang="ts">
const value = ref('11')
</script>
<template>
<son v-model="value" />
</template>vue
<script setup lang="ts">
defineProps<{ modelValue: string }>()
const emit = defineEmits<{ (e: 'update:modelValue', value: string): void }>()
</script>
<template>
<input :value="modelValue" @input="emit('update:modelValue', $event.target.value)">
</template>使用useVModel可以简化代码
使用 useVModel
vue
<script setup lang="ts">
const value = ref('11')
</script>
<template>
<son v-model="value" />
</template>vue
<script setup lang="ts">
import { useVModel } from 'hyh-toolkit'
const props = defineProps<{ modelValue: string }>()
const emit = defineEmits<{ (e: 'update:modelValue', value: string): void }>()
const _modelValue = useVModel(props, 'modelValue', emit)
</script>
<template>
<input v-model="_modelValue">
</template>这在需要传入多个参数的组件中很有用
比如整个表单 演武场
vue
<script setup lang="ts">
import { ref } from 'vue'
import son from './son.vue'
import type { IFormData } from './type'
const formData = ref<IFormData>({
name: 'hyh',
age: 18,
sex: '男'
})
</script>
<template>
<son v-model="formData" />
</template>vue
<script setup lang="ts">
import { useVModel } from 'hyh-toolkit'
import type { IFormData } from './type'
const props = defineProps<{ modelValue: IFormData }>()
const emit = defineEmits<{ (e: 'update:modelValue', value: IFormData): void }>()
const _modelValue = useVModel(props, 'modelValue', emit)
</script>
<template>
<label> 姓名: <input v-model="_modelValue.name"> </label>
<label> 年龄: <input v-model="_modelValue.age"> </label>
<label> 性别: <input v-model="_modelValue.sex"> </label>
</template>ts
export interface IFormData {
name: string
age: number
sex: '男' | '女'
}API
ts
const _modelValue = useVModel(props, 'propName', emit)Params
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
props | 定义的props | ReturnType<typeof defineProps> | 必传 |
propName | props中的key | keyof props | 必传 |
emit | 定义的emit | (...args: any[]) => void | 必传 |
Result
| 参数 | 说明 | 类型 |
|---|---|---|
_modelValue | 处理双向绑定的propName | ReturnType<typeof defineProps> |