В категории "Vue.js" вы можете получить данные дочернего компонента в другом компоненте, не являющемся его прямым родителем, с помощью использования событий и шины событий Vue.js.
Одним из способов передачи данных от дочернего компонента к другому компоненту является использование событий. Дочерний компонент может вмешаться в любое действие и передать данные родителю, который затем может передать эти данные другому компоненту.
В дочернем компоненте вы можете объявить пользовательское событие с помощью метода this.$emit(). Например, предположим, у вас есть дочерний компонент ChildComponent, и вы хотите передать данные из этого компонента в другой компонент OtherComponent. Вы можете сделать это следующим образом:
// ChildComponent.vue
<template>
<div>
<button @click="passData">Pass Data</button>
</div>
</template>
<script>
export default {
methods: {
passData() {
const data = 'Hello from ChildComponent';
this.$emit('data-updated', data);
},
},
};
</script>
Затем в родительском компоненте, который содержит ChildComponent, вы можете прослушивать событие data-updated и передавать данные в компонент OtherComponent. Например:
// ParentComponent.vue
<template>
<div>
<ChildComponent @data-updated="setData"></ChildComponent>
<OtherComponent :data="receivedData"></OtherComponent>
</div>
</template>
<script>
import OtherComponent from './OtherComponent.vue';
export default {
components: {
OtherComponent,
},
data() {
return {
receivedData: '',
};
},
methods: {
setData(data) {
this.receivedData = data;
},
},
};
</script>
Теперь, когда пользователь нажимает кнопку в ChildComponent, событие data-updated будет сгенерировано, и данные будут переданы в метод setData родительского компонента. receivedData затем используется внутри родительского компонента и передается в компонент OtherComponent.
Также, как альтернативный способ, вы можете использовать шину событий, предоставляемую Vue.js, чтобы передать данные от дочернего компонента к другому компоненту. Создайте новый экземпляр Vue в глобальной области видимости вашего приложения и используйте его в качестве шины событий, чтобы любые компоненты могли взаимодействовать и передавать данные друг другу. Это позволяет избежать необходимости явно передавать данные через родительские компоненты.
Например:
// EventBus.js
import Vue from 'vue';
export default new Vue();
// ChildComponent.vue
<template>
<div>
<button @click="passData">Pass Data</button>
</div>
</template>
<script>
import EventBus from './EventBus';
export default {
methods: {
passData() {
const data = 'Hello from ChildComponent';
EventBus.$emit('data-updated', data);
},
},
};
</script>
// OtherComponent.vue
<template>
<div>
<p>{{ receivedData }}</p>
</div>
</template>
<script>
import EventBus from './EventBus';
export default {
data() {
return {
receivedData: '',
};
},
created() {
EventBus.$on('data-updated', (data) => {
this.receivedData = data;
});
},
};
</script>
В этом примере в ChildComponent мы просто вызываем EventBus.$emit(), чтобы сгенерировать событие data-updated и передать данные. В OtherComponent мы вызываем EventBus.$on(), чтобы прослушать событие и получить переданные данные.
Обязательно импортируйте EventBus в каждый компонент, который участвует в передаче данных с помощью шины событий.
Таким образом, вы можете получить данные дочернего компонента в другом компоненте, не являющемся его прямым родителем, используя события и шину событий Vue.js.