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

Question

我有一个要触发的兄弟元素。

我试过这个解决方案

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

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

得到：未捕获的类型错误：this.$refs.fileUploader.click is not a function

b文件文档

Answer 1

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

 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 生成的正确引用名称非常有用

Answer 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>