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

【问题标题】：Vue event listener with internal and external parameter具有内部和外部参数的 Vue 事件监听器
【发布时间】：2021-03-16 23:44:32
【问题描述】：

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

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

【问题讨论】：

标签： javascript vue.js events vuejs2 vue-component

【解决方案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>

【讨论】：

thx @dan 不知道发生这种情况，但重启 VSCode 后一切正常