javascript - 在 Laravel 中将数据从一个 Vue.js 组件传递到另一个组件的最佳实践

Question

我有 Vue.js 的两个组件。我为单个表单创建了两个单独的组件，以避免困惑和复杂的代码结构。我想将这两种形式的数据组合起来，以便将其发送到服务器。这是我的 Blade 文件，其中包含两个组件。一个是 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)层次结构没有父子组件关系。我的目标是将数据从教师组件获取到学生组件。我怎样才能实现这个目标？
我的 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>
     

我的老师组件.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

根据项目的复杂性，您可以沿着两条主要路线走下去

1. 父组件
创建一个 vue 组件作为其他两个组件的父组件。然后，您可以从两个子组件发出并在父组件中处理它们。
如果您正在处理数量有限的组件并且不经常重复使用它们，这可能是一个可行的选择

2. VueX
对于许多组件分布在多个文件中的大型项目，您可能需要添加一些专用的状态管理。
VueX 会为你做这件事，但会增加额外的复杂性。
https://vuex.vuejs.org/