@wilburn
Vue.js предоставляет несколько способов связывания компонентов:
- Prop - это механизм передачи данных от родительского компонента дочернему. Родительский компонент может передавать данные через props, которые затем используются в дочернем компоненте. Пример:// Родительский компонент
<template>
<child-component :message="parentMessage" />
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent,
},
data() {
return {
parentMessage: 'Hello from parent',
};
},
};
</script>
// Дочерний компонент
<template>
<div>{{ message }}</div>
</template>
<script>
export default {
props: {
message: String,
},
};
</script>
- Event - это механизм передачи событий от дочернего компонента родительскому. Дочерний компонент может генерировать события, которые затем слушаются родительским компонентом. Пример:// Дочерний компонент
<template>
<button @click="emitEvent">Click me</button>
</template>
<script>
export default {
methods: {
emitEvent() {
this.$emit('custom-event', 'Hello from child');
},
},
};
</script>
// Родительский компонент
<template>
<div>
<child-component @custom-event="handleEvent" />
<p>{{ parentMessage }}</p>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent,
},
data() {
return {
parentMessage: '',
};
},
methods: {
handleEvent(message) {
this.parentMessage = message;
},
},
};
</script>
- Vuex - это библиотека управления состоянием, которая позволяет связывать компоненты через глобальное хранилище состояния. Компоненты могут читать и записывать данные в хранилище. Пример:// Store
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
export default new Vuex.Store({
state: {
message: '',
},
mutations: {
setMessage(state, message) {
state.message = message;
},
},
});
// Дочерний компонент
<template>
<button @click="setMessage">Click me</button>
</template>
<script>
export default {
methods: {
setMessage() {
this.$store.commit('setMessage', 'Hello from child');
},
},
};
</script>
// Родительский компонент
<template>
<div>
<child-component />
<p>{{ parentMessage }}</