vue-component - 如何在 Vue 中公开包装的 <input>？

Question

我正在尝试在 Vue 中创建一个可重用的样式化输入字段。为了使其具有样式(例如，里面有一个图标)，我需要将它包装在另一个 html 元素中。

让我们调用下面的例子StyledInput

<div class="hasIcon">
    <input />
    <i class="someIcon"></i>
<div>

如果我想使用 StyledInput它可能看起来像这样:

<styled-input @keyup.enter="doSomething">
</styled-input>

但这行不通，因为事件监听器附加到 <div>而不是 <input> .

解决方法是从输入字段发出所有按键事件:

<div class="hasIcon">
    <input @keyup="$emit('keyup', $event) />
    <i class="someIcon"></i>
<div>

但这不会很好地扩展，因为每次开发人员使用未映射的 Prop 或事件时都必须重写它。

有没有办法只让内部元素暴露给使用它的人？

Answer 1

我不确定是否有 Vue 方法来实现这一点，因为据我所知，没有办法动态绑定(bind) vue 事件，但是可以这样做通过将所有事件作为 Prop 传递然后使用 addEventListener() 映射它们以添加您的自定义事件来使用 vanilla javascript:

Vue.component('my-input', {
  template: "#my-input",
  props: ['events'],
  mounted() {
    // get the input element
    let input = document.getElementById('styled-input');

    // map events
    this.events.forEach((event) => {
      let key = Object.keys(event);
      input.addEventListener(key, event[key]);
    });
  }
})

然后你可以像这样将所有事件作为 Prop 传递:

<my-input :events="events"></my-input>

查看模型:

var app = new Vue({
  el: "#app",
  data: {
    events: [{
      focus: () => {
        console.log('focus')
      }
    }, {
      keyup: (e) => {
        console.log(e.which)
      }
    }]
  }
})

这是 JSFiddle:https://jsfiddle.net/h1dnk40v/

当然，这意味着任何开发人员都必须执行映射键代码等操作，因此您将失去 Vue 提供的一些便利。

我要提到的一件事是 Vue 组件 不一定要无限重用，它们应该提供特定的功能并封装复杂的逻辑，所以你可能会更好地实现最可能的用例，如果组件不适合，您可以扩展它或为该特定事件编写一个新组件。