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

Posted 2023-02-22

【中文标题】从多个子组件获取数据到父组件

【英文标题】：Get data to Parent component from multi child components

【发布时间】：2020-03-31 07:00:09

【问题描述】：

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

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

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

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

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

或者使用 EventBus 可能更好？

【问题讨论】：

我在几分钟前写了一篇相关文章。您需要子组件 $emit 他们对父组件的更改：dev.to/valentinprgnd/…

我明白了。所以重点是 this.$watch 并使用它我们跟踪更改并通知父级。

但是我的情况有点复杂。只有当我单击父组件中的“保存”按钮时，我才需要从子组件获取信息。所以子组件不应该传递任何数据，直到父组件告诉它们

您是否有一个表单组件，您在其插槽中提供其他组件，例如Name、DatePicker 以及您希望这些子组件中的数据在按下 Save 后转到此 Form？使用具有不同子组件的多个 Form 组件会导致每个 Form 中的数据集不同？

我不使用插槽。我有 1 个表单父组件，里面有 7 个子组件。是的，在表单组件中按“保存”后，我需要从表单组件内的所有子组件中获取所有数据......

【参考方案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>

【讨论】：

我知道组件代码类似于与.sync 修饰符的双向绑定使用，但在这种情况下v-model 对我来说更具可读性

感谢您的帮助。但是如果我有这样的“datepicker”组件怎么办： 它里面的这个 datepicker 有 2 个 vuejs-datepicker 和 4 个输入字段。所以这个组件被用来选择任何 FROM 日期+时间和 TO 日期+时间。所以我不能按照我的理解使用 v-model。

我试图添加 .sync: 但即使我在

好吧，我发现只有一种方法：一旦子组件中的数据发生更改就发出事件，并在父组件中捕获该事件并在那里更新状态。但由于我有一个由 3 个或更多组件组成的链，我会为此使用 EventBus。