VueJs 从父组件获取子表单数据

Posted 2023-02-22

【中文标题】VueJs 从父组件获取子表单数据

【英文标题】：VueJs getting child form data from parent component

【发布时间】：2020-04-04 04:34:09

【问题描述】：

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

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

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

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

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

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

感谢您的帮助。

【问题讨论】：

处理这种复杂状态管理的推荐方法是使用Vuex。

参考这个medium.com/@sky790312/…

@JoshuaMinkler 有这么复杂吗？

【参考方案1】：

即使您使用 $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)
    
  

孩子

<form>
  <input type="text" v-model="selected.text" />
</form>

export default 
  name: "childComp",
  props: ['value'],
  computed: 
    selected: 
      get() 
        return this.value;
      ,
      set(value) 
        this.$emit('input', value);
       
    
  

【讨论】：

如果表单中有 10 或 20 个字段，这是否合适？你会为表单中的每个元素创建一个计算对象，然后发出整个表单对象吗？

老实说没问题，你不会遇到任何性能问题

【参考方案2】：

我使用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)
    
  

我的子组件：

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

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