Пропсы (Props)
Пропсы позволяют передавать данные от родительского компонента к дочернему. Для передачи данных через пропсы, сначала определите их в дочернем компоненте и затем передайте значения из родительского компонента.
export default {
props: {
message: String,
},
};<template>
<ChildComponent :message="parentMessage" />
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent,
},
data() {
return {
parentMessage: 'Hello from parent component!',
};
},
};
</script>Кастомные события (Custom Events)
Кастомные события позволяют дочерним компонентам отправлять информацию родительским компонентам. В дочернем компоненте используйте $emit для отправки событий, а в родительском компоненте прослушивайте и обрабатывайте их.
export default {
methods: {
sendMessage() {
this.$emit('messageSent', 'Hello from child component!');
},
},
};<template>
<ChildComponent @messageSent="onMessageReceived" />
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent,
},
methods: {
onMessageReceived(message) {
console.log('Message received:', message);
},
},
};
</script>Provide/Inject
Механизм provide/inject позволяет передавать данные через несколько уровней иерархии компонентов без использования пропсов. В родительском компоненте используйте provide, а в дочерних компонентах — inject.
export default {
provide() {
return {
parentMessage: 'Hello from parent component!',
};
},
};export default {
inject: ['parentMessage'],
};Используя пропсы, кастомные события и provide/inject, можно эффективно реализовать коммуникацию между компонентами в Vue.js 3, что обеспечивает гибкость и масштабируемость приложений.