Vue.js VueJs从父组件获取子窗体数据

我的子组件中有一个表单：

<form @submit="submitForm">
  <input type="text" v-model="textInput" />
</form>

export default {
  name: "childComp",
  data: function() {
    return {
     textInput: ""
    }
  }
}

<form @submit="submitForm">
  <input type="text" v-model="textInput" />
</form>

export default {
  name: "childComp",
  data: function() {
    return {
     textInput: ""
    }
  },
  submitForm() {
    return this.form;
  }
}

导出默认值{
姓名：“childComp”，
数据：函数（）{
返回{
文本输入：“
}
}
}

现在，从父组件我有一个按钮，我需要单击该按钮来获取子表单数据

<button type="button" @click="getFormData()"> click </button>

export default {
  name: "ParentComp",
  data: function() {
    return {
     formData: []
    }
  },
  methods: {
    getFormData(d) {
      formData.push(d);
      console.log(d)
    }
  }
}

点击
导出默认值{
名称：“家长公司”，
数据：函数（）{
返回{
formData:[]
}
},
方法：{
getFormData（d）{
formData.push（d）；
控制台日志（d）
}
}
}

---

感谢您的帮助。

我使用

ref=“”

找到了解决方案。不知道将来会有多复杂

这就是我所做的

My parent component:

<button type="button" @click="getFormData()"> click </button>
<childComp ref="childComp" />

export default {
  name: "ParentComp",
  data: function() {
    return {
     formData: []
    }
  },
  methods: {
    getFormData() {
      const data = this.$refs.childComp.submitForm()
      formData.push(data);
      console.log(data)
    }
  }
}

我的父组件：
点击
导出默认值{
名称：“家长公司”，
数据：函数（）{
返回{
formData:[]
}
},
方法：{
getFormData（）{
const data=this.$refs.childComp.submitForm（）
formData.push（数据）；
console.log（数据）
}
}
}

我的孩子部分：

<form @submit="submitForm">
  <input type="text" v-model="textInput" />
</form>

export default {
  name: "childComp",
  data: function() {
    return {
     textInput: ""
    }
  }
}

<form @submit="submitForm">
  <input type="text" v-model="textInput" />
</form>

export default {
  name: "childComp",
  data: function() {
    return {
     textInput: ""
    }
  },
  submitForm() {
    return this.form;
  }
}

导出默认值{
姓名：“childComp”，
数据：函数（）{
返回{
文本输入：“
}
},
submitForm（）{
返回此表格；
}
}

即使您通过使用

$ref

解决了这个问题，我还是建议您在自定义组件中使用

v-model

实现的强大功能

这是一种更干净的方法，通过这样做，您将始终手头有表单数据，而不必在需要使用它时实际检索它

可以通过执行以下操作来完成：

母公司

<button type="button" @click="getFormData()"> click </button>
<childComp v-model="formData" />

export default {
  name: "ParentComp",
  data: function() {
    return {
     formData: {}
    }
  },
  methods: {
    getFormData() {
      console.log(this.formData)
    }
  }
}

点击
导出默认值{
名称：“家长公司”，
数据：函数（）{
返回{
formData:{}
}
},
方法：{
getFormData（）{
console.log（this.formData）
}
}
}

孩子

导出默认值{
姓名：“childComp”，
道具：['value']，
计算：{
选定：{
得到（）{
返回此.value；
},
设置（值）{
这是。$emit（'input'，value）；
} 
}
}
}

处理类似复杂状态管理的推荐方法是使用。请参阅@JoshuaMinkler this complex？如果表单中有10或20个字段，这是否合适？您会为表单中的每个元素创建一个计算对象，然后发出整个表单对象吗？老实说，这很好，您不会遇到任何性能问题