在 Vue 中传递事件方法答案

【问题标题】：Passing event methods in Vue在 Vue 中传递事件方法
【发布时间】：2018-01-26 09:01:18
【问题描述】：

我正在尝试确定如何通过绑定更改侦听器将事件向下传递到子输入组件。我正在使用包装的输入组件，但希望能够在父组件中定义方法。

//App.js:
<currency-input :input="changeInput" :value="inputs.name"></currency-input>
<input :input="changeInput" :value="inputs.address"></input>

<script>
export default: {
  changeInput(e) {
    this.$store.dispatch('changeInput', e);
  }
}
<script>


//currency-input
<masked-input type="currency" class="currency-input" :mask="currencyMask">
</masked-input>


//store.js vuex action
changeProp: function( state, e ){
  state.dispatch('change_prop', e.target.name, e.target.value);
}

这会在“输入”上触发，但不会在“货币输入”上触发。如果我将@input 属性添加到currency-input 并将其绑定到masked-input 的@input，则函数运行但'e' 的值只是输入值，而不是事件。

为什么会发生这种情况？如何传递函数以使参数最终成为事件本身？

【问题讨论】：

您是否尝试在事件中使用.native 修饰符？类似@change.native="changeInput"

标签： javascript events vue.js vue-component

【解决方案1】：

这是你想要的吗？在currency-input 内部，<input> 元素使用传入的input 属性作为其输入事件处理程序。

new Vue({
  el: '#app',
  data: {
    inputs: {
      name: 'iName',
      address: 'iAddress'
    }
  },
  methods: {
    changeInput(e) {
      console.log('Change', e.target.tagName, e.target.value);
    }
  },
  components: {
    currencyInput: {
      props: ['input', 'value']
    }
  }
});

<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script>
<div id="app">
  <currency-input :input="changeInput" :value="inputs.name" inline-template>
    <div>
      <input @input="input" :value="value">
    </div>
  </currency-input>
  <input @input="changeInput" :value="inputs.address">
</div>

【讨论】：