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

Question

Самира

vue , javascript

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

В вашей реализации имеется родительский компонент и два дочерних компонента. 

1. В каждом из дочерних компонентов создается своя референция `ref` для переменной `names` следующим образом: 
   <pre><code class="javascript">const names: Map&lt;string, number&gt; = ref(new Map&lt;string, number&gt;());</code></pre>
   
   Также дочерние компоненты принимают функцию через `props`: 
   <pre><code class="javascript">const props = defineProps&lt;{
       clear: (names: Map&lt;string, number&gt;) =&gt; void
   }&gt;();</code></pre>
   
   При нажатии на кнопку вызывается эта функция с передачей `names`: 
   <code class="javascript">@click="clear(names)"</code>
   
2. Родительский компонент обрабатывает переданный объект `names` в функции `clear()`.

Проблема заключается в том, что при использовании одного и того же объекта `names` в двух дочерних компонентах, при вызове функции `clear()` в родительском компоненте, оба дочерних очищаются одновременно. Это связано с тем, что обе дочерние компоненты ссылаются на один и тот же объект.

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

9 октября 2024 г. 15:27

Ответы на вопрос 1

Похожие вопросы

Answer 1

Чтобы добиться независимости данных между несколькими дочерними компонентами в рамках Vue, можно использовать несколько подходов. Один из простых способов — передавать каждому дочернему компоненту уникальный экземпляр объекта `names`. Таким образом, изменения в одном компоненте не повлияют на другие.

Вот как можно это реализовать:

1. **Создание экземпляров `names` в родительском компоненте**: Вместо того чтобы создавать `names` в дочерних компонентах, создайте их в родительском компоненте и передайте каждый экземпляр дочерним компонентам по отдельности.

2. **Пример кода**:
   
```javascript
// Родительский компонент
<template>
    <ChildComponent :names="child1Names" :clear="clearChild1" />
    <ChildComponent :names="child2Names" :clear="clearChild2" />
</template>

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

const child1Names = ref(new Map<string, number>());
const child2Names = ref(new Map<string, number>());

const clearChild1 = () => {
    child1Names.value.clear();
}

const clearChild2 = () => {
    child2Names.value.clear();
}
</script>
```

```javascript
// Дочерний компонент (ChildComponent.vue)
<template>
    <button @click="clear(names)">Очистить</button>
</template>

<script setup>
import { defineProps } from 'vue'

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

### Пояснения:

1. **Уникальные `Map`-объекты**: В родительском компоненте мы создаем два отдельных объекта `child1Names` и `child2Names`. Каждый из них является уникальным экземпляром `Map`, который будет передан соответствующему дочернему компоненту.

2. **Выделение функций очистки**: Вместо одной общей функции, мы создаем две разные функции `clearChild1` и `clearChild2`, которые обрабатывают очистку только для соответствующего компонента.

3. **Передача через `props`**: Дочерние компоненты принимают пропсы `names` и `clear`, что позволяет им оперировать только со своими собственными данными.

Таким образом, при активации метода очистки в каждом дочернем компоненте будет очищаться только его собственный экземпляр `Map`, и состояние других компонентов останется неизменным.