Vue.js 从Vue中的子组件获取输入值

我想从我的子组件中检索所有输入值（

client

和

advice

，见下文），但不确定如何继续

客户端.vue

导出默认值{
数据（）{
返回{
客户：{
名称：“”，
代码：“”，
}
}
}
}

建议.vue

导出默认值{
数据（）{
返回{
忠告:{
福：''，
酒吧：''，
金额：[]
}
}
}
}

每个组件都有比上面示例更多的字段

我的主页（家长）看起来很简单：

从“@/components/clientInfo.vue”导入clientInfo；
从“@/components/advice.vue”导入通知；
导出默认值{
组成部分：{
clientInfo，
建议
},
方法：{
printForm（）{}
}
}

我的第一个想法是

$emit

，但不知道如何有效地使用20多个字段，而不将

@emitMethod=“parentEmitMethod”

附加到每个字段

我的第二个想法是建立一个Vuex商店（如下所示），但我不知道如何一次保存所有州，也不确定是否应该保存

新建Vuex.Store({
声明：{
客户：{
名称：“”，
代码：“”
},
忠告:{
福：''，
酒吧：''，
金额：[]
}
}
})

我认为当用户使用

@change

编写内容时，您可以实现您想要的功能。当输入值发生更改时，这将触发一个方法，您可以使用按钮或任何您想要的功能，例如：

子组件

您必须在每个输入中添加

@change=“emiccurrstateparent（）”

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

然后在您的父组件中

我会使用按钮而不是

@change

，就像“Save”按钮idk一样，vuex也是如此，您可以使用

@change

事件

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

然后在商店里

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

您可以使用获取具有

名称

属性的

表单

或

的值（忽略匿名值）。即使表单包含嵌套的Vue组件，并且这些组件包含

s，此功能也可以使用

导出默认值{
方法：{
打印表格（e）{
const form=e.target
const formData=new formData（form）//获取表单中的所有命名输入
for（formData的常量[inputName，value]{
log（{inputName，value}）
}
}
}
}

---

您可以将v-model与您的自定义组件一起使用。假设您想这样使用它们：

<advice v-model="adviceData"/>

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

---

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

这就是我提到的，我首先不想做的，观察者会在哪里？在组件内部？@Jonathan在每个你想使用v-model的自定义组件中。你能创建一个例子吗，我不太明白如何制作它work@Jonathan我用一个更完整的例子更新了我的答案。有关vue监视程序的更多信息，请参见：

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