是否可以从 $emit 返回一个值？

Question

我有一个使用 $emit 调用 Parent 的子组件。我们如何从 $emit 获取返回值？

我尝试返回一个值并在函数中包含一个变量，但它们都不起作用。是 $emit 函数无法返回值的本质吗？有什么解决办法吗？

孩子：

let data = null;

await this.$emit('loadData', this.Id, data);

家长：

 async loadData(Id, data) {
 
    let newData = await this.$store.dispatch('user/loadUserData', Id);
   
    data = { ...newData };
}

Answer 1

您可以通过事件发出参数。官方指南中有解释。他们有这个例子：

我的按钮组件：

<button @click="$emit('increaseBy', 1)">
  Increase by 1
</button>

家长：

<MyButton @increase-by="increaseCount" />


function increaseCount(n) {
  count.value += n
}

他们还指出：

事件名称之后传递给 $emit() 的所有额外参数都将是 转发给听众。例如，使用 $emit('foo', 1, 2, 3) 监听器函数将接收三个参数。

Answer 2

您不需要从

$emit

返回。通常，您会根据子级发出的事件来改变父级的状态。然后，子级使用父级的状态来更新自身，例如通过 props。这就是

v-model

的工作原理：

VUE SFC 游乐场

如果你想从父级获取值，只需调用它的方法：

VUE SFC 游乐场

家长：

<script setup>
import { ref } from 'vue';
import Comp from './Comp.vue';

const rows = ref([]);
const counter = ref(0);
defineExpose({getRow(){ return 'Row ' + ++counter.value}});

</script>

<template>
  <comp />
</template>

孩子：

<script setup>
import {ref} from 'vue';
const rows = ref([]);
</script>

<template>
  <div v-for="row in rows">{{ row }}</div>
  <div>
    <button @click="rows.push($parent.getRow())" >Add row</button>
  </div>
</template>

您还可以使用提供/注入：

VUE SFC 游乐场