为什么我不能通过 prop 触发输入文件？

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

如果不是从点击事件内部触发，它将不起作用。

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

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