【Vue 表单类组件封装与 v-model 简化代码】

什么是 Vue 表单类组件？

Vue 表单类组件是一种将表单元素（如输入框、复选框、单选框等）封装成可复用的组件的方式。这些组件可以在不同的页面和项目中使用，提高了代码的可维护性和可重用性。

封装 Vue 表单类组件

步骤1：创建一个表单组件

创建一个 Vue 组件，命名为 MyForm，并在该组件内定义一个表单元素，例如文本输入框。

<template>
  <div>
    <input type="text" v-model="inputValue" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputValue: "",
    };
  },
};
</script>

步骤2：使用 v-model 简化数据绑定

上述代码中使用了 v-model 指令将输入框的值与 inputValue 数据属性进行双向绑定。在父组件中可以使用 v-model 控制该表单元素。

步骤3：将表单组件封装

将 MyForm 组件封装成可复用的表单组件。可以通过添加 props 和 emits 属性来实现。

<template>
  <div>
    <input type="text" v-model="inputValue" />
  </div>
</template>

<script>
export default {
  props: {
    value: String, // 接收父组件的值
  },
  emits: ["input"], // 发射 input 事件
  data() {
    return {
      inputValue: this.value,
    };
  },
  watch: {
    value(newValue) {
      this.inputValue = newValue; // 监听 value 变化
    },
    inputValue(newValue) {
      this.$emit("input", newValue); // 触发 input 事件
    },
  },
};
</script>

步骤4：在父组件中使用表单组件

在父组件中使用封装的表单组件 MyForm 并使用 v-model 来简化代码。

<template>
  <div>
    <my-form v-model="formData" />
  </div>
</template>

<script>
import MyForm from "./MyForm.vue";

export default {
  components: {
    MyForm,
  },
  data() {
    return {
      formData: "",
    };
  },
};
</script>

上述代码中将 MyForm 组件引入到父组件中，并使用 v-model 将 formData 与表单组件的值进行双向绑定。在父组件中可以访问和修改表单的值。

原文地址：https://blog.csdn.net/qq_66726657/article/details/143876169

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！