vue.js - VueJs 从父组件获取子表单数据

Question

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

<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)
    }
  }
}

感谢你的帮助。

Answer 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);
      } 
    }
  }
}

Answer 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;
  }
}