vue.js - Vue如何从子组件中获取价值

Question

这是我的用例：

我的主页有几个从用户收集不同输入的子组件，最后我想提交收集所有输入的整个页面。因此我想从子组件中检索数据

一种选择是使用store，但是我的子组件超级简单，只是一些表格，store似乎太重了......另一种选择是我可以修改prop，虽然我知道这是不好的做法，但这种方法看起来很完美...... .

如果我的逻辑很简单，可以修改吗？（只是收集用户的输入）或者prop我必须去Vuexstore

标签： vue.jsvuex

Answer 1

扩展 Ifaruki 和 Andres Foronda 的出色答案，另一个相关选项是在sync子组件的道具上使用修饰符。

假设子组件有一个名为name. 在父组件中，您可以sync像这样使用修饰符：

<Child :name.sync="childName"></Child>

然后，在子组件中，当nameprop 的值应该更新时，不要直接更新。相反，发出一个遵循可同步道具的命名约定的事件，即update:nameOfProp. 所以在我们的例子中，子组件会这样做：

this.$emit('update:name', newName);

sync 修饰符的好处是我们不必在父组件中编写事件处理函数——Vue 会为我们完成并自动更新绑定到 prop 的变量。

您可以在官方文档中sync阅读有关修饰符的更多详细信息。