Question

我有一个名为example-component的表单组件，其中有一个名为media-uploader的用于媒体上传的第三方子组件

<example-component>
    <form :action= "something">
     // Some other input types 


     // This is a third party component I installed on my application so I dont have access to 
     its .js file
     <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="''">
     </media-upload>
    </form>
</example-component>

并且:url的{{1}}内部的路由导致控制器中的这种逻辑

media-uploader

我拥有对public function something() { $variable = "Something"; return response()->json($variable); }的完全访问权限，但无权访问example-component 因此，如何获取media-uploader中的$variable值，以便可以在example-component中使用该$variable

Answer 1

您可以使用Axios或其他工具向服务器执行请求。在组件的created（）挂钩中。

在此示例中，我使用了Axios

<example-component route="{{ route('admin.upload.media', $folder) }}">
...
</example-component>

，然后在组件.vue文件中添加

export default {
  props: {
    route: String
  },
  data() {
    return {
      variable: null
    };
  },
  created() {
    this.axios(this.route).then(res => { this.variable = res.data });
  }
  ...
};

从父组件vue访问第三方子组件

1 个答案: