Question

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

<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中，以便可以在控制器中使用它

Answer 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>)。

如何从父组件属性访问子组件属性

1 个答案: