如何使用 v-model 和 Options API 将 Vue.js 表单组件对象与父对象链接？

2024-03-19 15:13:04

在 Vue.js 中使用 v-model 和 Options API 将表单组件对象与父对象链接

引言

在 Vue.js 中，表单组件的表单字段通常使用单独的 prop 和 emit 事件与父组件进行绑定。然而，对于将表单元素的值存储在对象中而不是单独变量的情况下，此方法就不再适用。本文将深入探讨如何使用 v-model 和 Options API 在 Vue.js 中将表单组件对象与父对象链接，解决这一挑战。

v-model 与 Options API

v-model：双向数据绑定

v-model 是一个神奇的指令，可用于在表单元素和 Vue.js 数据模型之间建立双向数据绑定。在 Options API 中，v-model 可以使用 .sync 修饰符与 prop 绑定：

<input v-model.sync="formData.name">

Options API：生命周期钩子和事件

Options API 提供了生命周期钩子和事件，允许开发人员在组件的生命周期中拦截和处理事件。对于将表单组件对象与父对象链接，我们可以使用 updated 钩子：

updated() {
  this.$emit('update:formData', this.formData);
}

步骤详解

子组件使用 v-model.sync ：在子组件中，将 v-model.sync 绑定到 formData prop，此 prop 将包含表单对象。
子组件使用 updated 钩子 ：在子组件的 updated 钩子中，使用 $emit() 事件更新 formData prop 的值，传递一个包含更新后表单对象的新值。
父组件使用 v-model ：在父组件中，使用 v-model 绑定到子组件的 formData prop。

代码示例：

子组件 (UserName.vue)

<template>
  <input v-model.sync="formData.firstName">
  <input v-model.sync="formData.lastName">
</template>

<script>
export default {
  props: ['formData'],
  updated() {
    this.$emit('update:formData', this.formData);
  }
};
</script>

父组件 (App.vue)

<template>
  <UserName v-model="formData"></UserName>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        firstName: 'John',
        lastName: 'Doe'
      }
    }
  }
};
</script>