通过 this.$refs 从另一个 vue.js 组件调用方法

Posted 2023-02-23

【中文标题】通过 this.$refs 从另一个 vue.js 组件调用方法

【英文标题】：Call method from another vue.js component through this.$refs

【发布时间】：2019-06-16 04:18:03

【问题描述】：

我有一个要触发的同级元素。

i've try this solution

<b-img @click="callFileLoader"/>
<b-file type="file" ref="fileUploader"></b-file>
...

methods:
  callFileLoader () 
    this.$refs.fileUploader.click()
  
 

得到：未捕获的类型错误：this.$refs.fileUploader.click 不是函数

b-file documentation

【问题讨论】：

表示b文件不可点击

首先检查 BFile 组件是否可点击，然后试试这个：this.$refs.fileUploader.$el.click()

【参考方案1】：

如果是兄弟组件，则通过 v-ref 方法在兄弟组件中无法识别。 如果没有嵌套的父组件，请尝试通过父组件或 Vue root 访问它：

 this.$root.$refs.fileUploader.click()

或者在兄弟组件b-img中使用this.$root.$emit()来触发事件，并将事件监听器放置在b-file组件的events中以捕获发出的事件并触发click

所以在 b-img 中是：

methods:
  callFileLoader () 
    this.$root.$emit('file-uploader-click');
  
 

在b-file 中将是：

events:
  'file-uploader-click' : function() 
    this.click();
  
 

您尝试在组件中放置v-on:event-name="action"，而不是放置事件方法：

VueTools chrome 扩展对于检查 VueJs 生成的正确引用名称非常有用

【讨论】：

那些组件不是我的，所以我不能更改它们

然后尝试通过在您放置的组件实例中放置 v-on 来调用 click，请更改您的问题以提及这些组件无法编辑:)

谢谢！文档非常不清楚 $refs 的范围是什么。我不明白如何获取不同组件的 $refs 。我就是这样做的：this.$parent.$refs.notesComponent.$refs.notes.focus()

【参考方案2】：

经过一些调试，我找到了一种使用此语句访问该输入的方法：

   this.$refs.fileUploader.$el.firstChild

这是可以点击的<input>元素。

new Vue(
  el: "#app",
  data() 
    return 
      file: null,
      file2: null
    
  ,
  methods: 
    callFileLoader() 

      this.$refs.fileUploader.$el.firstChild.click();

    
  

);

<script src="https://unpkg.com/vue@2.5.17/dist/vue.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue@2.0.0-rc.11/dist/bootstrap-vue.min.js"></script>
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue@2.0.0-rc.11/dist/bootstrap-vue.css" />

<div id='app'>

  <div>
    <!-- Styled -->

    <b-file v-model="file" ref="fileUploader" :state="Boolean(file)" placeholder="Choose a file..."></b-file>
    <div class="mt-3">Selected file: file && file.name</div>
    <button class="btn btn-primary" @click="callFileLoader">load</button>
  </div>
</div>

【讨论】：

给这个人的道具