通过 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 不是函数

b-file documentation

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

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>

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

Call method from another vue.js component through this.$refs

javascript

vue.js

vue-component

vuejs2

bootstrap-vue