Vue2中如何从嵌套子组件获取v-model绑定的数据？

问题背景 #

自定义Input组件时，单层父组件（如MyComponent.vue）使用v-model绑定数据完全正常。但将组件拆分为多层嵌套结构（Form.vue → OrderFormInfo.vue → Input.vue）后，在OrderFormInfo中用v-model绑定phone、name等字段，并尝试通过props传递给Form.vue时触发Vue报错，无法正常获取子组件内的表单数据。

报错原因 #

Vue遵循单向数据流规则：父组件通过props传递给子组件的数据，子组件只能读取，不能直接修改。在OrderFormInfo中直接用v-model绑定父组件传入的props（如:phone="phone"后用v-model="phone"），本质是尝试修改props的值，违反了单向数据流，因此触发报错。

解决方案 #

以下提供两种可行方案，推荐第二种（打包对象传递），更简洁易维护。

方案1：单个字段通过.sync修饰符同步 #

修改OrderFormInfo.vue

在子组件内部维护本地状态，监听本地数据变化后通过update:字段名事件通知父组件：

<template>
  <div class="form-info">
    <Input
      placeholder="phone number"
      type="text"
      v-model="localPhone"
    />
    <Input
      placeholder="recipient name"
      type="text"  
      v-model="localName"
    />
    <!-- 其他表单元素同理绑定本地变量 -->
    <button @click="$emit('next-step')">下一步</button>
  </div>
</template>

<script>
export default {
  props: {
    name: String,
    phone: String,
    apart: String,
    city: String,
    postal: String,
    region: String,
    address: String
  },
  data() {
    return {
      localName: this.name,
      localPhone: this.phone,
      localApart: this.apart,
      localCity: this.city,
      localPostal: this.postal,
      localRegion: this.region,
      localAddress: this.address
    };
  },
  watch: {
    // 监听本地数据变化，同步到父组件
    localName(newVal) {
      this.$emit('update:name', newVal);
    },
    localPhone(newVal) {
      this.$emit('update:phone', newVal);
    },
    localApart(newVal) {
      this.$emit('update:apart', newVal);
    },
    localCity(newVal) {
      this.$emit('update:city', newVal);
    },
    localPostal(newVal) {
      this.$emit('update:postal', newVal);
    },
    localRegion(newVal) {
      this.$emit('update:region', newVal);
    },
    localAddress(newVal) {
      this.$emit('update:address', newVal);
    },
    // 监听父组件props变化，同步到本地（可选，若父组件可能主动修改值）
    name(newVal) {
      this.localName = newVal;
    },
    phone(newVal) {
      this.localPhone = newVal;
    }
    // 其他props的监听同理
  }
};
</script>

修改Form.vue

使用.sync修饰符简化事件监听，自动处理update:字段名事件：

<template>
  <OrderFormInfo
    v-if="step === 'info'"
    :name.sync="name"
    :apart.sync="apart"
    :city.sync="city"
    :phone.sync="phone"
    :postal.sync="postal"
    :region.sync="region"
    :address.sync="address"
    @next-step="handleNext"
  />
</template>

<script>
export default {
  data() {
    return {
      name: '',
      phone: '',
      apart: '',
      city: '',
      postal: '',
      region: '',
      address: '',
      step: 'info'
    };
  },
  methods: {
    handleNext() {
      // 直接使用this.name、this.phone等获取最新数据
      console.log('表单数据:', {
        name: this.name,
        phone: this.phone,
        // 其他字段
      });
      // 下一步逻辑
    }
  }
};
</script>

方案2：打包表单对象实现v-model（推荐） #

将所有表单字段打包成一个对象，通过v-model一次性传递，无需单个字段处理，更简洁。

修改Form.vue

定义一个表单对象，用v-model绑定到OrderFormInfo：

<template>
  <OrderFormInfo
    v-if="step === 'info'"
    v-model="formData"
    @next-step="handleNext"
  />
</template>

<script>
export default {
  data() {
    return {
      formData: {
        name: '',
        phone: '',
        apart: '',
        city: '',
        postal: '',
        region: '',
        address: ''
      },
      step: 'info'
    };
  },
  methods: {
    handleNext() {
      // 直接获取完整表单数据
      console.log('表单数据:', this.formData);
      // 下一步逻辑
    }
  }
};
</script>

修改OrderFormInfo.vue

实现自定义组件的v-model规范：接收value prop，触发input事件传递更新后的对象：

<template>
  <div class="form-info">
    <Input
      placeholder="phone number"
      type="text"
      v-model="localFormData.phone"
    />
    <Input
      placeholder="recipient name"
      type="text"  
      v-model="localFormData.name"
    />
    <!-- 其他表单元素绑定localFormData对应的字段 -->
    <button @click="$emit('next-step')">下一步</button>
  </div>
</template>

<script>
export default {
  props: {
    value: Object // v-model默认绑定的prop名称
  },
  data() {
    // 解构父组件传入的对象，创建本地副本，避免直接修改props
    return {
      localFormData: { ...this.value }
    };
  },
  watch: {
    // 深度监听本地表单对象的变化，同步到父组件
    localFormData: {
      deep: true,
      handler(newVal) {
        this.$emit('input', newVal); // v-model默认触发的事件名称
      }
    },
    // 监听父组件传入的value变化，同步到本地（可选）
    value(newVal) {
      this.localFormData = { ...newVal };
    }
  }
};
</script>

说明 #

你的Input组件实现是正确的，它遵循了Vue自定义组件v-model的规范：接收value prop，并在输入时触发input事件传递新值，因此在单层使用时完全正常。问题出在多层嵌套时违反了单向数据流规则，通过上述方案即可解决。

内容的提问来源于stack exchange，提问作者d s