Vue3 双向绑定

需求：父和子实现双向数据绑定 （Vue3.4+）

  单参数实现：

父组件------------------<UserNamev-model:first-name="first"v-model:last-name="last"
/>子组件：------------<script setup>
const firstName = defineModel('firstName')
const lastName = defineModel('lastName')
</script><template><input type="text" v-model="firstName" /><input type="text" v-model="lastName" />
</template>

2、对象传递

对象：interface Obj{username:'',password:''
}父组件---------------------------
<UserNamev-model:first-name="first"v-model:last-name="last"v-model:obj='userInfo'
/>
<script setup>const userInfo=ref<obj>({username:'张三',password:'123456'
})
</script>子组件----------------------------------
const userInfo=defineModel<String[]>("ojb", {type: Array,default: () => [],
});<template><input type="text" v-model="firstName" /><input type="text" v-model="lastName" />
</template>

注：defineModel：返回的对象ref的，在script中使用时需要加.value获取值，如果是对象传值必须加默认值