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

Question

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

Answer 1

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

但Vue公司可以使它很方便与ref/$refsfeature

有了它，你可以在“标志”在模板中的元素，并方便地从组件的代码中访问它，而不依赖于选择。

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>

Answer 2

你输入和点击监听器添加ref到您的包装div

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


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