Как связывать компоненты в Vue.js?

@wilburn 

Vue.js предоставляет несколько способов связывания компонентов:

1. 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>
2. 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>
3. 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 }}</