VueJs получает данные дочерней формы от родительского компонента

У меня есть форма в моем дочернем компоненте:

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

Ценю вашу помощь.


vue.js vuejs3 vuejs2 vue-component
person Martian.titan    schedule 10.12.2019    source источник
comment
Для подобного управления сложным состоянием рекомендуется использовать Vuex.   -  person Joshua Minkler    schedule 11.12.2019
comment
Обратитесь к этому medium.com/@sky790312/   -  person Saniya syed qureshi    schedule 11.12.2019
comment
@JoshuaMinkler это комплекс?   -  person André Werlang    schedule 17.10.2020

Ответы (2)


arrow_upward
2
arrow_downward

Несмотря на то, что вы решили эту проблему с помощью $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);
      } 
    }
  }
}
person Jesper    schedule 19.12.2019
comment
Подойдет ли это, если в форме будет 10 или 20 полей? Не могли бы вы просто создать вычисляемый для каждого элемента в форме, а затем выдать весь объект формы? - person Simon; 10.05.2021
comment
Честно говоря, это было бы хорошо, у вас не будет проблем с производительностью - person Jesper; 12.05.2021

arrow_upward
-1
arrow_downward

Я нашел решения, используя 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;
  }
}
person Martian.titan    schedule 11.12.2019