从多个子组件获取数据到父组件

Question

我需要从所有子组件中收集数据并在父组件中获取。 例如，我有一个带有“保存”按钮的表单组件。 一旦我点击“保存”按钮，我需要所有子组件向我发送用户放在那里的所有数据。

<Form>
  <Name />
  <DatePicker />
  .....
</Form> 

所以主组件是Form，它有几个子组件。一旦我点击“保存”，我需要在表单中获取子组件数据。

我正在考虑为所有子组件提供“ref”，并在单击 Form 中的“Save”后在 Parent 中调用他们自己的方法。在这些方法中，我将收集所有数据并使用 this.$emit 触发事件，我可以将收集到的数据发送给父级。

这是一个好的解决方案吗？

或者使用 EventBus 可能更好？

Answer 1

比起emit，我更喜欢bind。

Vue.component("InputField", {
  template: `<input v-model="syncedValue" />`,
  name: "InputField",
  props: {
    value: String
  },
  computed: {
    syncedValue: {
      get() {
        return this.value;
      },
      set(v) {
        this.$emit("input", v);
      }
    }
  }
});

Vue.component("Form", {
  template: `<div><InputField v-model="name"/><InputField v-model="surname"/><button @click="save">Save</button></div>`,
  name: "Form",
  data() {
    return {
      name: "",
      surname: ""
    };
  },
  methods: {
    save() {
      alert(`${this.name} ${this.surname}`);
    }
  }
});

new Vue({
  template: `<Form></Form>`
}).$mount("#app");

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app"></div>