Можно ли вернуть значение из $emit?
У меня есть дочерний компонент, вызывающий Parent, используя $emit. Как мы можем получить возвращаемое значение из $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 };
}
Ответы 2
Вы можете передавать аргументы вместе с событием. Это объясняется в официальном руководстве. У них есть такой пример:
Компонент MyButton:
<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) Функция прослушивателя получит три аргумента.
Вам не нужно возвращаться из $emit. Обычно вы изменяете состояние родительского элемента в зависимости от событий, исходящих от его дочернего элемента. Затем дочерний элемент использует состояние родителя для обновления, например, с помощью реквизита. Вот как работает v-model, кстати:
Если вы хотите получить значение от родителя, просто вызовите его метод:
Родитель:
<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>
Вы также можете использовать предоставление/внедрение: