[英]How to access the child component prop from parent component prop
我已经创建了一个用于提交我的表单的组件,并且在该组件内我有另一个用于文件上传的组件,就像这样......
<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 变量)现在在提交主表单时我还想将返回的数据返回到我的 controller。
我的主窗体(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 中,以便我可以在我的 controller 中使用它
您可以在booksmandala-originals-form
组件中创建一个方法,该方法将 json object 作为参数并将其存储在您需要的任何位置。 然后你可以将这个方法作为prop
传递给你的子组件。 在子组件中,您可以在收到 json object 时调用该方法,并将其作为参数传递给该方法。
将方法作为 PROP 传递:
<media-upload
:jsonHandler="jsonHandler"
>
父脚本部分
data () {
return {
myJsonData: null
}
},
methods: {
jsonHandler(jsonData) {
this.myJsonData = jsonData;
}
}
在孩子中,您只需调用this.jsonHandler(<pass your data>)
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.