Javascript Vuejs提交表单，在子组件中输入

我有一个父组件，它是一个表单组件，有多个子组件包含输入字段

<template>
    <div class="form">
        <generalData v-model="input" />
        <textAreas v-model="input"/>
        <button class="btn" @click="Submit()">Submit</button>
    <div/>
</template>

<script>
export default {
    data(){
        return {
            input: {
                name: '',
                age: '',
                address: ''
                bio: ''
            }
        }
    },
    methods: {
        Submit(){
            console.log('Submitting...');
            console.log(this.input);
        }
    }
}
</script>

提交
导出默认值{
数据（）{
返回{
输入：{
名称：“”，
年龄：''，
地址：''
简历：''
}
}
},
方法：{
提交（）{
console.log（'Submitting…'）；
console.log（this.input）；
}
}
}

子组件包含文本字段

<template>
    <div class="generalData">
        <input name="name" type="text" v-bind:value="input.name" v-on:input="updateInput($event.target.value)">
        <input name="age" type="text" v-bind:value="input.age" v-on:input="updateInput($event.target.value)">
    <div/>
</template>

<script>
export default {
    props: ['input'],
    data(){
        return {

        }
    },
    methods: {
        updateInput(value){
            this.$emit('input', value);
        }
    }
}
</script>

导出默认值{
道具：[“输入”]，
数据（）{
返回{
}
},
方法：{
更新输入（值）{
这是。$emit（'input'，value）；
}
}
}

---

其他子组件也一样，但值没有更新，我无法提交它们

您必须使用组件内部定义的道具。您将该道具命名为输入，然后：

<template>
    <div class="form">
        <generalData :input="input" />
        <textAreas :input="input" />
        <button class="btn" @click="submit">Submit</button>
    <div/>
</template>

<script>
export default {
    data(){
        return {
            input: {
                name: '',
                age: '',
                address: ''
                bio: ''
            }
        }
    },
    methods: {
        submit(){
            console.log('Submitting...');
            console.log(this.input);
        }
    }
}
</script>

提交
导出默认值{
数据（）{
返回{
输入：{
名称：“”，
年龄：''，
地址：''
简历：''
}
}
},
方法：{
提交（）{
console.log（'Submitting…'）；
console.log（this.input）；
}
}
}

尝试以下代码：

<template>
    <div class="generalData">
        <input type="text" v-model="person.name" @change="handleChange" @input="handleInput">
        <input type="text" v-model="person.age" @change="handleChange" @input="handleInput">
        <input type="text" v-model="person.address" @change="handleChange" @input="handleInput">
        <input type="text" v-model="person.bio" @change="handleChange" @input="handleInput">
    <div/>
</template>

<script>
export default {
  props: ['value'],
  data () {
    return {
        person: {
            name: '',
            age: '',
            address: ''
            bio: ''
        }
    }
  },
  methods: {
    handleChange () {
        return this.$emit('change', this.person)
    },
    handleInput () {
        return this.$emit('input', this.person)
    },
    setCurrentValue (person) {
        this.person = person
    }
  },
  watch: {
    value (val) {
      if (!val) return
      this.setCurrentValue(val)
    }
  }
}
</script>

导出默认值{
道具：['value']，
数据（）{
返回{
人:{
名称：“”，
年龄：''，
地址：''
简历：''
}
}
},
方法：{
handleChange（）{
返回此。$emit（'change'，this.person）
},
handleInput（）{
返回此.$emit（'input'，this.person）
},
setCurrentValue（个人）{
这个人
}
},
观察：{
价值（val）{
如果（！val）返回
此.setCurrentValue（val）
}
}
}

另一种方法是创建一个输入组件，然后在传入属性的用户对象上迭代，并在与值绑定的输入上直接使用

v-model

。如果用户对象位于根视图实例中，则可以使用

this.$root.which

看看这把小提琴