Vue3中父子组件实现数据双向绑定效果
父组件：
<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>
将数据使用v-model传递给子组件
子组件：
<template><div class="hy-form"><el-inputplaceholder="请输入用户"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) => {// 数据双向绑定给modelValueemit('update:modelValue', newValue)},{deep: true})return {formData}}
})
</script><style scoped lang="less">
.hy-form {padding-top: 22px;
}
</style>
