Vue3 双向绑定

ZillahV06

已于 2024-05-29 17:37:55 修改

阅读量309

点赞数 1

CC 4.0 BY-SA版权

文章标签：前端

于 2024-05-29 16:53:33 首次发布

本文链接：https://blog.csdn.net/ZillahV06/article/details/139300223

需求：父和子实现双向数据绑定（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获取值，如果是对象传值必须加默认值