Question

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

//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的{{1}}，那么该函数会运行，但'e'的值只是输入值而不是事件。

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

Answer 1

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

＆＃13;

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']
    }
  }
});

＆＃13;

<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>

＆＃13;

在Vue中传递事件方法

1 个答案: