Question

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

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

因此，主要组件是Form，它具有几个子组件。单击“保存”后，我需要在Form中获取子组件数据。

我正在考虑为所有子组件提供“引用” ，并在“表单”中单击“保存”后在父类中调用其自己的方法。在这些方法中，我将使用 this。$ emit 收集所有数据并触发事件，在那里我可以将收集到的数据发送给父级。

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

或者使用EventBus更好？

Answer 1

相对于bind，我更喜欢emit。

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>

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

1 个答案: