лучший способ передачи данных от одного компонента Vue. js другому в Laravel

Question

У меня есть два компонента Vue. js. Я создал два отдельных компонента для одной формы, чтобы избежать запутанной и сложной структуры кода. Я хочу объединить данные этих двух форм, чтобы отправить их на сервер. Вот мой файл лезвия, который содержит два компонента. Один - StudentComponent. vue, а второй - TeacherComponent. vue.

    @extends('layouts.app')
    @section('content')
    <div class="main-content" id="panel">
        <main class="col-12 col-md-8 col-xl-7 py-md-3 pl-md-5 ct-content" role="main">
            <div id="app">
                <teacher-component :foods_array="{{ json_encode($foods) }}"></teacher-component>
                <student-component :foods_array="{{ json_encode($foods) }}"></student-component>
            </div>
        </main>
    </div>
    @endsection

Помните, что иерархия этих компонентов (StudentComponent и TeacherComponent) не имеет отношения родительско-дочерний компонент. Моя цель - передать данные из компонента учителя в компонент ученика. Как я могу достичь этой цели?

My StudentComponent. vue

    <template>
        <div>
            <div class="card" style="width: 172%;">
                <!-- Form Fields -->
            </div>
        </div>
    </template>
    
    <script>
        export default {
            props : {
                foods_array: {
                    type: Array,
                    required: true
                }
            },
            beforeMount: function () {
                this.foods = this.foods.concat(this.foods_array); 
            },
            data() {
                return {
                    student: {
                        email: '',
                        name: '',
                        roll_number:null,
                        food: null,
                        checked: []
                    },
                    foods: [{ text: 'Select One', value: null }],
                    show: true
                }
            },
            methods: {
                onSubmit(evt) {
                    evt.preventDefault()
                    axios.post('api/food/store'{student:JSON.stringify(this.student),role:'student'})
                    .then(function (response) {
                        console.log(response);
                     })
                     .catch(function (error) {
                        console.log(error);
                     });
                },
             }
        }
   </script>
     

My TeacherComponent. vue

    <template>
        <div>
            <div class="card" style="width: 172%;">
                <!-- Form Fields -->
            </div>
        </div>
    </template>
    
    <script>
        export default {
            props : {
                foods_array: {
                    type: Array,
                    required: true
                }
            },
            beforeMount: function () {
                this.foods = this.foods.concat(this.foods_array); 
            },
            data() {
                return {
                    teacher: {
                        email: '',
                        name: '',
                        department:'',
                        food: null,
                        checked: []
                    },
                    foods: [{ text: 'Select One', value: null }],
                    show: true
                }
            },
            methods: {
                onSubmit(evt) {
                    evt.preventDefault()
                    axios.post('api/food/store'{student:JSON.stringify(this.student),role:'teacher'})
                    .then(function (response) {
                        console.log(response);
                     })
                     .catch(function (error) {
                        console.log(error);
                     });
                },
             }
        }
   </script>

Answer 1

В зависимости от сложности вашего проекта вы можете go по двум основным маршрутам

1. Родительский компонент

Создайте компонент vue, который будет родительским для двух других ваших компонентов. Затем вы можете испускать из двух дочерних компонентов и обрабатывать их в родительском.

Если вы имеете дело с ограниченным количеством компонентов и не используете их повторно, это может быть жизнеспособным вариантом

2. VueX

Для более крупных проектов с множеством компонентов, распределенных по нескольким файлам, может потребоваться добавить некоторое выделенное управление состоянием.

VueX сделает это за вас, но добавляет дополнительная сложность.

https://vuex.vuejs.org/