Question

我想从子组件（client和advice，如下所示）中检索所有输入值，但是不确定如何继续。

client.vue

<template>
    <div id="client">
        <input type="text" v-model="client.name" />
        <input type="text" v-model="client.code" />
    </div>
</template>

<script>
    export default {
        data() {
            return {
                client: {
                    name: '',
                    code: '',
                }
            }
        }
    }
</script>

advice.vue

<template>
    <div id="advice">
        <input type="text" v-model="advice.foo" />
        <input type="text" v-model="advice.bar" />
        <div v-for="index in 2" :key="index">
            <input type="text" v-model="advice.amount[index]" />
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                advice: {
                    foo: '',
                    bar: '',
                    amount:[]
                }
            }
        }
    }
</script>

每个组件都具有比上例更多的字段。

我的主页（父级）看起来很简单：

<template>
    <form id="app" @submit="printForm">
        <clientInfo />
        <advice />
        <input type="submit" value="Print" class="btn" />
    </form>
</template>

<script>
    import clientInfo from "@/components/clientInfo.vue";
    import advice from "@/components/advice.vue";

    export default {
        components: {
            clientInfo,
            advice
        },
        methods: {
            printForm() {}
        }
    }
</script>

我的第一个想法是$emit，但不确定如何在不将@emitMethod="parentEmitMethod"附加到每个字段的情况下有效地处理20多个字段。

我的第二个想法是拥有Vuex商店（如下所示），但是我不知道如何一次保存所有状态，也不知道是否应该保存。

new Vuex.Store({
    state: {
        client: {
            name:'',
            code:''
        },
        advice: {
            foo:'',
            bar:'',
            amount:[]
        }
    }
})

Answer 1

您可以使用FormData来获取form的{{1}}或<input>的具有<textarea>属性的值 / em>（忽略匿名名称）。即使表单具有包含name的嵌套Vue组件，此方法也有效。

<input>

demo

Answer 2

我认为当用户使用@change写东西时，您可以实现您想要的，这将在更改输入值时触发一种方法，您可以改用按钮或任何您想要的东西，例如：

子组件

<input type="text" v-model="advice.amount[index]" @change="emitCurrStateToParent ()"/>

您必须在每个输入中添加@change="emitCurrStateToParent ()"。

emitCurrStateToParent () {
    this.$emit("emitCurrStateToParent", this.advice)
}

然后将其添加到父组件中

<child-component v-on:emitCurrStateToParent="reciveDataFromChild ($event)"></child-component>

reciveDataFromChild (recivedData) {
    // Do something with the data
}

我会使用按钮而不是@change，就像“保存”按钮idk一样，vuex也是如此，您可以使用@change事件

saveDataAdviceInStore () {
    this.$store.commit("saveAdvice", this.advice)
}

然后在商店中

mutations: {
    saveAdvice (state, advice) {
        state.advice = advice
    }
}

Answer 3

您可以将 v模型与自定义组件一起使用。假设您要像这样使用它们：

<advice v-model="adviceData"/>

为此，您需要注意建议组件中输入元素的值更改，然后发出带有值的输入事件。这将更新 adviceData 绑定属性。一种通用的方法是将监视程序包含在建议组件中，如下所示：

export default {
  data() {
    return {
      advice: {
        foo: '',
        bar: '',
        amount:[]
      }
    }
  },
  watch: {
    advice: {
      handler: function(newValue, oldValue) {
        this.$emit('input', newValue);
      },
      deep: true,
    }
  },
}

这样，您将不必为每个输入字段添加处理程序。如果我们需要检测建议对象中嵌套数据的更改，则必须包含 deep 选项。

从Vue的子组件获取输入值

3 个答案: