Vue3-双向绑定

Oncccce

于 2024-04-29 14:39:21 发布

阅读量90

点赞数 1

分类专栏： Vue 文章标签： vue

本文链接：https://blog.csdn.net/qq_45415290/article/details/138312516

版权

Vue 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

本文介绍了如何在Vue中使用``组件结合`reactive`API实现数据绑定，展示了如何定义对象类型的person模型并更新其属性如姓名和年龄。

摘要由CSDN通过智能技术生成

<template>
  <div>
    inner:{{ person }}
    <el-form :model="person" label-width="auto" style="max-width: 600px">
      <el-form-item label="姓名">
        <el-input v-model="person.name" />
      </el-form-item>
      <el-form-item label="年龄">
        <el-input v-model="person.age" />
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup lang="ts" name="Demo">
const person = defineModel("person", { type: Object });
</script>

<template>
  <div>
    outer:{{ person }}
    <Demo v-model:person="person" />
  </div>
</template>

<script setup lang="ts" name="Index">
  import { reactive } from "vue";

  const person = reactive({
    name: undefined,
    age: undefined,
  });
</script>