Как обработать объект конкретного дочернего компонента в родительском?

Question

[AlexCruel]

Существуют родительский компонент и два дочерних.

1. В дочерних инициализируется ref:

const names: Map<string, number> = ref(new Map<string, number>());

принимается функция:

const props = defineProps<{
    clear: (names: Map<string, number>) => void
}>();

по нажатию на кнопку отправляется names:
@click="clear(names)

2. Родительский компонент обрабатывает names в clear().

Получается так, что он очищает names в двух дочерних одновременно. Искал информацию - пишут, что ссылка на объект одна и та же. Не понимаю - ведь два разных компонента создают свой ref...

Как добиться независимости names, чтобы родительский компонент по вызову функции clear() обрабатывал объект конкретного дочернего компонента?

Comments

[modelair]

есть демка?

[AlexCruel]

Parent.vue

<script setup lang="ts">
const clear = (names: Map<string, number>) => {
    // ...
};
</script>

<template>
 <Child1
        :clear="clear" />

 <Child2
        :clear="clear" />
</template>

Child1.vue / Child2.vue

<script setup lang="ts">
const props = defineProps<{
    clear: (names: Map<string, number>) => void
}>();

const names: Map<string, number> = ref(new Map<string, number>());
</script>

<template>
<button @click="clear(names)">Очистить</button>
</template>

[Aetae]

AlexCruel, всё работает как и должно. Проблема у тебя явно где-то в другом месте.

Например тут неправильный тип:

// должно быть Ref(Map<string, number>);
const names: Map<string, number> = ref(new Map<string, number>());

[AlexCruel]

Aetae, я нашел ошибку в логике

[AlexCruel]

Aetae, Ref<Map<string, number>>- наверно так)