javascript - 具有内部和外部参数的 Vue 事件监听器

Question

如何同时向事件侦听器添加内部和外部参数？

<myComp @do="wrapDo($event, 5)"></myComp>

function wrapDo(objectFromComp, myIntegerParameter){
    // objectFromComp is okey :)
    // myIntegerParameter is undefined :(
}

在myComp.vue：

this.$emit('do', { text: "return object from component"} );

我试过这个但得到undefined：

@do="x => wrapDo(x, 5)"

标签： javascriptvue.jseventsvuejs2vue-component

Answer 1

它应该可以正常工作，只需确保您具有该功能methods：

Vue.component('mycomp', {
  template: `
  <div>
    <button @click="$emit('do', { text: 'return object from component'})">Emit</button>
  </div>
  `
})

new Vue({
  el: "#app",
  methods: {
    wrapDo(objectFromComp, myIntegerParameter) {
      console.log(objectFromComp, myIntegerParameter);
    }
  },
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <mycomp @do="wrapDo($event, 5)"></mycomp>
</div>