父组件：
<template>
<div class="user">
<hy-form v-model="formData" />
</div>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue'
import HyForm from '@/base-ui/form'
export default defineComponent({
components: { HyForm },
name: 'sysUser',
setup() {
const formData = ref({
id: '',
password: '',
})
return {
formData,
}
}
})
</script>
<style scoped></style>
将formData数据使用v-model传递给子组件
子组件：
<template>
<div class="hy-form">
<el-input
placeholder="请输入用户"
v-model="formData.id"
/>
</div>
</template>
<script lang="ts">
import { defineComponent, ref, watch } from 'vue'
export default defineComponent({
props: {
// modelValue为约定俗成字段，就是父组件传来的v-model绑定的值
modelValue: {
type: Object,
required: true
},
},
emits: ['update:modelValue'],
setup(props, { emit }) {
// 这里父子是因为不直接修改modelValue中的数据，保持单一数据流
const formData = ref({ ...props.modelValue })
// 监听formData中数据的改变
watch(
formData,
(newValue) => {
// 数据双向绑定给modelValue
emit('update:modelValue', newValue)
},
{
deep: true
}
)
return {
formData
}
}
})
</script>
<style scoped lang="less">
.hy-form {
padding-top: 22px;
}
</style>
使用modelValue进行接收，将接收的modelValue拷贝给formData，并监听formData的数据是否改变，改变了就将新数据emit(‘update:modelValue’, 新数据)更新数据
