Question

我正在尝试打开一些文件，但是通过将prop传递给组件（为方便起见，我需要这样做）。有没有办法做到这一点？

https://codepen.io/iliyazelenko/pen/RBejRV?editors=1010

以下代码中的变体不适合我：

  <input type="file" ref="input" hidden>

  <button @click="() => { $refs.input.click() }">Choose file</button>

为什么单击但无法打开文件选择？

this.$refs.input.addEventListener('click', e => {
  console.log('clicked: ', e.target)
})

Answer 1

如果未从click事件内部触发，它将无法正常工作。

您可以做的是在子组件内部创建一个方法，该方法可以在事件侦听器回调中从父组件调用。

const compo = Vue.component("compo", {
  template: '<input type="file" ref="input" hidden>',
  mounted() {
    this.$refs.input.addEventListener('click', e => {
      console.log('clicked: ', e.target)
    })
  },
  methods: {
    open() {
      this.$refs.input.click()
    }
  }
})

new Vue({
  el: '#app',
  components: {
    compo
  },
  data() {
    return {
      propForComponent: false
    };
  },
  methods: {
    onClick() {
      this.$refs.compo.open()
    }
  }
})

<compo ref="compo"></compo>

<button @click="onClick">Choose file</button>

查看此更新的笔：https://codepen.io/WisdomSky/pen/GBYyGL?editors=1010

为什么无法通过prop触发输入文件？

1 个答案: