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

Posted 2023-02-16

【中文标题】从父组件vue访问第三方子组件

【英文标题】：Access the third party child component from parent component 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 控制器有什么关系？

这取决于媒体上传组件对响应对象所做的事情。你有在线组件的链接吗？

【参考方案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 );
  
  ...
;