Да, вы можете совмещать компоненты в Vue.js 3. Компоненты во Vue являются основными строительными блоками ваших приложений, и их можно вкладывать друг в друга, создавая иерархию с родительскими и дочерними компонентами.
Чтобы организовать взаимодействие между двумя компонентами, например, между `Button` и `Picture`, и сделать так, чтобы при нажатии кнопки картинка скрывалась, вы можете использовать один из способов взаимодействия между компонентами во Vue. Один из простых способов – использовать события (events) и привязку данных (data binding).
Для создания такого взаимодействия вам нужно:
1. Определить состояние (например, переменную `isPictureVisible`) в родительском компоненте.
2. Использовать это состояние для управления видимостью изображения в компоненте `Picture`.
3. Изменять это состояние из компонента `Button` с помощью пользовательского события.
Вот пример того, как это может быть реализовано:
Родительский компонент, в котором используются `Button` и `Picture`:
```html
<template>
<div>
<Button @click="togglePicture" />
<Picture v-if="isPictureVisible" />
</div>
</template>
<script>
import Button from './Button.vue';
import Picture from './Picture.vue';
export default {
components: {
Button,
Picture
},
data() {
return {
isPictureVisible: true
};
},
methods: {
togglePicture() {
this.isPictureVisible = !this.isPictureVisible;
}
}
};
</script>
```
Компонент `Button.vue`:
```html
<template>
<button @click="handleClick">Toggle Picture</button>
</template>
<script>
export default {
methods: {
handleClick() {
this.$emit('click');
}
}
};
</script>
```
Компонент `Picture.vue`:
```html
<template>
<img src="path/to/image.jpg" alt="Picture">
</template>
<script>
export default {
// Компонент `Picture` не требует дополнительной логики для этого примера
};
</script>
```
В данном примере, когда пользователь кликает по кнопке, которая обрабатывается методом `handleClick` компонента `Button`, вызывается событие `$emit` с именем `click`. Родительский компонент использует модификатор события `@click` для прослушивания этого события и вызова метода `togglePicture`, который переключает состояние `isPictureVisible`, скрывая или показывая изображение в компоненте `Picture`.