Vue3 双向绑定

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

  单参数实现：

父组件------------------

<UserName
  v-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:''
}



父组件---------------------------
<UserName
  v-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获取值，如果是对象传值必须加默认值