В Vue 3 вы можете использовать композицию и прокидывание пропсов вниз по дереву компонентов для передачи данных между несвязанными компонентами без использования хранилища.
В вашем случае, вы можете передать массив `basket.value` из компонента TheMain.vue в компонент TheHeader.vue через пропсы.
В TheMain.vue:
```html
<template>
<div>
<!-- Компонент, в котором определен массив basket -->
<TheHeader :basket="basket.value" />
</div>
</template>
<script>
import { ref } from 'vue';
import TheHeader from './TheHeader.vue';
export default {
components: {
TheHeader,
},
setup() {
const basket = ref([]);
// Логика и изменение массива basket
return {
basket
};
},
};
</script>
```
В TheHeader.vue:
```html
<template>
<div>
<!-- Использование переданного пропса basket -->
<TheAuthPanel :basket="basket" />
</div>
</template>
<script>
import TheAuthPanel from './TheAuthPanel.vue';
export default {
components: {
TheAuthPanel,
},
props: {
basket: Array,
},
};
</script>
```
В TheAuthPanel.vue:
```html
<template>
<div>
<!-- Использование переданного пропса basket -->
<p>{{ basket }}</p>
</div>
</template>
<script>
export default {
props: {
basket: Array,
},
};
</script>
```
Таким образом, массив `basket` будет передан из компонента TheMain.vue в TheHeader.vue, а затем в TheAuthPanel.vue с помощью пропсов. Изменения в массиве `basket` будут автоматически отображаться в TheHeader.vue и TheAuthPanel.vue.