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

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

<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);
},