如何从父组件 prop 访问子组件 prop答案

【问题标题】：How to access the child component prop from parent component prop如何从父组件 prop 访问子组件 prop
【发布时间】：2020-04-14 11:38:55
【问题描述】：

我已经创建了一个用于提交表单的组件，并且在该组件内部我还有另一个用于像这样的文件上传的组件..

<booksmandala-originals-form
                :action="'{{ url('admin/booksmandala-originals') }}'"
                inline-template>

                <form class="form-horizontal form-create" method="post" @submit.prevent="onSubmit" :action="this.action" enctype="multipart/form-data" novalidate>
                    @csrf
                    <div class="card-header">
                        <i class="fa fa-plus"></i> Create
                    </div>

                    <div class="card-body">

                       <div class="form-group row align-items-center" :class="{'has-danger': 
                        errors.has('categories'), 'has-success': this.fields.published_by && 
                        this.fields.categories.valid }">
                         <label for="categories" class="col-form-label text-md-right" 
                           :class="isFormLocalized ? 'col-md-4' : 'col-md-2'">Select 
                           Categories</label>
                         <div :class="isFormLocalized ? 'col-md-4' : 'col-md-9 col-xl-8'">
                            <multiselect v-model="form.categories" tag-placeholder="Add this 
                              as new category" placeholder="Search or add a category" 
                              label="title" track-by="id" :options="{{ $categories->toJson() 
                               }}" :multiple="true" :taggable="true" @tag="addCategory" 
                              :close-on-select="false" name="categories[]"></multiselect>
                              <div v-if="errors.has('categories')" class="form-control- 
                             feedback form-text" v-cloak>@{{ errors.first('categories') }} 
                              </div>

                          </div>
                       </div>


                      <media-upload
                          :ref="'cover_uploader'"
                          :collection="'cover'"
                          :url="'{{ route('admin.upload.media', $folder) }}'"
                          :accepted-file-types="''"
                          :max-number-of-files="5"
                          :max-file-size-in-mb="100"
                          :accepted-file-types="''"
                          @if(isset($media))
                             :uploaded-images="{{ $media->toJson() }}"
                          @endif

                      </media-upload>




                    </div>

                    <div class="card-footer">
                        <button type="submit" class="btn btn-primary" :disabled="submiting">
                            <i class="fa" :class="submiting ? 'fa-spinner' : 'fa-download'"></i>
                            Save
                        </button>
                    </div>

                </form>

            </booksmandala-originals-form>

而这个media-upload 会返回一个名为data 的json 变量（我的意思是组件中提到的路由返回一个json 变量）现在，在提交主表单时，我还想将返回的数据发送给我的控制器。

我的主表单（Booksmandala-original-form.js）有这个代码

import AppForm from '../app-components/Form/AppForm';

Vue.component('booksmandala-originals-form', {
    mixins: [AppForm],
    data: function() {
        return {
            form: {
                title:  '' ,
                body:  '' ,
                published_at: '' ,
                enabled:  false ,
                slug : '',
                categories:[],
                tags: [],
                files:[],
            },
            mediaCollections: ['cover'],
        }

    },
    props : ['users','categories']

   });

我真正想要的是我想将 media-upload 返回的 json 值存储在我的 data() 中的 form.js 中，以便我可以在我的控制器中使用它

【问题讨论】：

标签： javascript laravel vue.js vuejs2 vue-component

【解决方案1】：

您可以在 booksmandala-originals-form 组件中创建一个方法，该方法将 json 对象作为参数并将其存储在您需要的任何位置。然后您可以将此方法作为prop 传递给您的子组件。在子组件中，您可以在收到 json 对象时调用该方法并将其作为参数传递给该方法。

将方法作为道具传递：

<media-upload
   :jsonHandler="jsonHandler"
   >

父级中的脚本部分

data () {
      return {
            myJsonData: null
      }
},
methods: {
    jsonHandler(jsonData) {
        this.myJsonData = jsonData;
    }
}

在孩子中你只需调用this.jsonHandler(<pass your data>)。

【讨论】：