从 vue.js 中的另一个元素触发一个元素上的事件答案

【问题标题】：Trigger an event on an element from another element in vue.js从 vue.js 中的另一个元素触发一个元素上的事件
【发布时间】：2017-11-03 19:35:59
【问题描述】：

我有一个 div 和一个文件输入框。当我们点击 div 时，会触发文件输入的点击。如何在 vue.js 中做到这一点？

【问题讨论】：

你可以用html元素标签来做

标签： javascript vue.js

【解决方案1】：

您必须访问 DOM 才能触发输入的点击事件。

但是 Vue 可以通过 ref/$refs feature 使其非常方便

使用它，您可以在模板中“标记”一个元素，并在组件代码中方便地访问它，而无需依赖选择器。

new Vue({
  el: '#app',
  methods: {
    clickHandler() {
      this.$refs.fileInput.click()
    }
  }
})

.button {
  padding: 10px;
  border-radius: 5px;
  border: 1px solid #CCC;
  display: inline-block;
}

<script src="https://unpkg.com/vue@2.3/dist/vue.js"></script>
<div id="app">
  <div class="button" @click="clickHandler">Click me!</div>
  <input type="file" ref="fileInput">
</div>

【讨论】：

哎呀你迟到了 3 秒
请务必在回答时附上对代码的一些解释。
感谢提醒，编辑了我的答案。这样更好吗？
为什么它不适用于下拉？

【解决方案2】：

为您的输入添加一个ref 并为您的包装器添加一个点击侦听器div

<div @click="triggerFileInput" id="wrapper">
    <input type="file" ref="myFile">
</div>


methods:{
    triggerFileInput(){
        this.$refs.myFile.click();
    }
}

【讨论】：