Vue如何从子组件中获取价值

Question

这是我的用例：

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

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

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

Answer 1

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

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

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

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

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

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

您可以阅读有关sync 修饰符in the official docs. 的更多详细信息

Answer 2

从子组件中检索数据使用$emit 这里是一个例子：

//parent copmonent

<template>
   <div>
      <child @someEvent="someMethod"></child>
   </div>
</template>

import child from "path/"
<script>
export default {
   components: {
      child
   },
   methods: {
      someMethod(data){
         console.log(data);
      }
   }
}
</script>

子组件

<template>
   <div>
      <button @click="sendEvent">send</button>
   </div>
</template>

<script>
export default {
   methods: {
      sendEvent(){
         this.$emit("someEvent", "working");
      }
   }
}
</script>

$emit 接受 2 个参数。第一个是事件名称，第二个是您发送的数据。 父级只需要使用@ 来监听被触发的事件。

Answer 3

您可以从子级监听事件并更新父级数据属性

//parent component
<div>
  <input-name @updateName="eventToUpdateName" /> <!--child component-->
</div>
...
data: () => ({ nameFromChild: '' )},
methods: {
  eventToUpdateName(value) {
    this.nameFromChild = value; // Update from child value emitted
  }
}
...

在子组件中

// Child component
<input v-model="name" />
...
data: () => ({ name: '' }),
// watch for changes in the name property and emit an event, and pass the value to the parent
watch: { name() { this.$emit('updateName', this.name } }
...

此外，您可以使用 v-model 指令并从子级发出“输入”事件。

//parent component
<div>
  <input-name v-model="nameFromChild" /> <!--child component-->
</div>
...
data: () => ({ nameFromChild: '' )}
...

现在在子组件中你可以拥有

// Child component
<div>
  <input v-model="name" />
</div>
data: () => ({ name: '' }),
props: { value: { type: String, default: '' },
created() { this.name = this.value }, // You can receive a default value
watch: { name() { this.$emit('input', this.name } }
...