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

【问题标题】：Access the third party child component from parent component vue从父组件vue访问第三方子组件
【发布时间】：2020-07-29 07:37:12
【问题描述】：

我有一个名为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>

并且media-uploader 的:url 内部的路由在控制器中导致了这个逻辑

public function something()
{
   $variable = "Something";
   return response()->json($variable);
}

我可以完全访问example-component，但我无权访问media-uploader 那么如何在我的example-component 中获取$variable 值，以便我可以在我的example-component 中使用该$variable

【问题讨论】：

不清楚“我的example-component 中的$variable 值” 是什么。这个 $variable 值在哪里定义？它和你的 Laravel 控制器有什么关系？
这取决于媒体上传组件对响应对象所做的事情。你有在线组件的链接吗？

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

【解决方案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 });
  }
  ...
};

【讨论】：