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

【问题标题】：best practice for passing data from one Vue.js component to another in Laravel在 Laravel 中将数据从一个 Vue.js 组件传递到另一个组件的最佳实践
【发布时间】：2020-11-23 09:31:18
【问题描述】：

我有两个 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）层次结构没有父子组件关系。我的目标是从教师组件获取数据到学生组件。我怎样才能实现这个目标？

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

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

【问题讨论】：

标签： javascript php html laravel vue.js

【解决方案1】：

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

1.父组件

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

如果您正在处理数量有限的组件并且没有大量重复使用它们，那么这可能是一个可行的选择

2。 VueX

对于包含分布在多个文件中的许多组件的大型项目，您可能需要添加一些专门的状态管理。

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

https://vuex.vuejs.org/

【讨论】：