@jaylen.trantow
В Vue.js связь между компонентами можно организовать с помощью Props и Events.
Родительский компонент:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<template> <div> <child-component :message="parentMessage"></child-component> </div> </template> <script> import ChildComponent from './ChildComponent.vue'; export default { components: { ChildComponent }, data() { return { parentMessage: 'Привет из родительского компонента!' }; } }; </script> |
Дочерний компонент:
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<template> <div> <p>{{ message }}</p> </div> </template> <script> export default { props: { message: String } }; </script> |
Родительский компонент:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<template> <div> <child-component @custom-event="handleEvent"></child-component> </div> </template> <script> import ChildComponent from './ChildComponent.vue'; export default { components: { ChildComponent }, methods: { handleEvent(eventData) { console.log(eventData); } } }; </script> |
Дочерний компонент:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<template> <div> <button @click="emitEvent">Нажми меня</button> </div> </template> <script> export default { methods: { emitEvent() { this.$emit('custom-event', 'Hello from child component!'); } } }; </script> |
В этом примере дочерний компонент вызывает событие custom-event
при клике на кнопку, и родительский компонент ловит это событие и выводит переданные данные в консоль.
@jaylen.trantow
Таким образом, связь между компонентами в Vue.js может быть организована с помощью передачи данных через props и передачи событий через $emit. Используя этот механизм, компоненты могут взаимодействовать и обмениваться данными, делая приложение более гибким и модульным.