vue子组件的表单使用父组件的数据并修改值，同步数据到父组件

弃之

已于 2022-11-24 15:57:15 修改

阅读量1.5k

点赞数

分类专栏：前端文章标签： vue.js elementui 前端

于 2022-11-24 15:53:39 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_44643019/article/details/128020219

版权

前端专栏收录该内容

25 篇文章

订阅专栏

本文详细介绍了在Vue中如何通过属性传递数据从父组件到子组件，并在子组件内部进行表单验证。例子中展示了如何使用.sync修饰符更新父组件的数据，以及在子组件中定义和使用计算属性、监听器来处理表单输入的变化。同时，子组件通过props接收并验证来自父组件的数据，确保表单输入的必填性和数据类型。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

父组件使用子组件并传递数据：

<MyForm :dataValue.sync="phone"  dataName='phone' />

父组件准备数据：

phone:13327401214

子组件接受数据：

  props: {
    dataValue: {
      require: true,
    },
    dataName: {
      require: true,
      type: String,
    },
  },

子组件form表单：

 <el-form
      :model="form"
      :rules="rules"
      ref="ruleForm"
    >

    <el-form-item :prop="dataName">
        <el-input
            placeholder="请输入内容"
            :value="form[dataName]"
            @input="inputChange"
        ></el-input>
   </el-form-item>
 </el-form>

子组件定义form表单数据：

  computed: {
    form() {
      return {
        [this.dataName]: this.dataValue,
      };
    },
    rules() {
      return {
        [this.dataName]: [
          {
            required: true,
            trigger: ["change", "blur"],
            message: "请输入内容",
          },
        ],
      };
    },
  },

子组件编辑数据：

inputChange(value) {
     this.$emit("update:dataValue", value);
},