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

我有两个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

@extends（'layouts.app'））
@节（“内容”）
@端部

请记住，这些组件（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>
     

    <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>

导出默认值{
道具：{
食物和食物阵列：{
类型：数组，
必填项：true
}
},
beforeMount:函数（）{
this.foods=this.foods.concat（this.foods\u数组）；
},
数据（）{
返回{
学生：{
电子邮件：“”，
名称：“”，
卷号：空，
食物：空，
选中：[]
},
食物：[{text:'Select One'，value:null}]，
秀：真的
}
},
方法：{
onSubmit（evt）{
evt.preventDefault（）
post（'api/food/store'{student:JSON.stringify（this.student），角色：'student'}）
.然后（功能（响应）{
控制台日志（响应）；
})
.catch（函数（错误）{
console.log（错误）；
});
},
}
}

我的老师

    <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>
     

    <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>

导出默认值{
道具：{
食物和食物阵列：{
类型：数组，
必填项：true
}
},
beforeMount:函数（）{
this.foods=this.foods.concat（this.foods\u数组）；
},
数据（）{
返回{
老师：{
电子邮件：“”，
名称：“”，
部门：''，
食物：空，
选中：[]
},
食物：[{text:'Select One'，value:null}]，
秀：真的
}
},
方法：{
onSubmit（evt）{
evt.preventDefault（）
post（'api/food/store'{student:JSON.stringify（this.student），角色：'teacher'}）
.然后（功能（响应）{
控制台日志（响应）；
})
.catch（函数（错误）{
console.log（错误）；
});
},
}
}

根据项目的复杂性，您可以选择两条主要路线

---

1。父组件

创建一个vue组件作为其他两个组件的父级。然后，可以从两个子组件发射并在父组件中处理它们

如果您处理的组件数量有限，并且没有太多地重用它们，那么这是一个可行的选择

---

2。VueX

对于包含多个文件的多个组件的大型项目，可能需要添加一些专用的状态管理

VueX将为您执行此操作，但会增加额外的复杂性