在vue中使用参数发出事件

Question

我试图发出带有这样的参数的功能。

template: `
    <div class="searchDropDown">
    <div class="dropdown is-active">
    <div class="dropdown-trigger">
      <button class="button" aria-haspopup="true" aria-controls="dropdown-menu">
        <span>{{selectedItem}}</span>
      </button>
    </div>
    <div class="dropdown-menu" id="dropdown-menu" role="menu">
      <div class="dropdown-content">
        <a class="dropdown-item" v-for="item in drop" @click="$emit('select-menu-item($event)')">
          {{item.name}}
        </a>
      </div>
    </div>
  </div>
    </div>
  `

这是我正在尝试将项目传递给像参数一样的方法。

这是我尝试发出功能的组件：

<search-component v-bind="searchProps" @select-menu-item="selectedITem($event)"></search-component>

这是我的方法：

selectedITem(arg1) {
      console.log("cl")
      console.log(arg1)
    }

这是如果我没有尝试传递参数，那么一切都很好，因此我的方法selectedITem正在工作。当我尝试传递类似的参数时，什么也没发生，并且我没有收到任何错误。

Answer 1

中的以下参数$emit()是您发出的函数中的参数。

$emit('select-menu-item', $event, 1, 2, 3, 4, "cupcakes")

并在您的组件方法中。

selectMenuItem: function(evt, num1, num2, num3, num4, food){

}

并在您实际的组件标记中。您不需要添加参数。只需编写对方法的引用

<search-component v-bind="searchProps" @select-menu-item="selectMenuItem">

样品

$emit('select-menu-item', $event, 1, 2, 3, 4, "cupcakes")

selectMenuItem: function(evt, num1, num2, num3, num4, food){

}

Answer 2

只是从@Albana Clara 添加更多答案。

您可以将参数与传递的事件合并。

例子：

<search-component v-bind="searchProps" @select-menu-item="selectMenuItem('test', ...arguments)">

selectMenuItem: function(a, b) {
  console.log(a + " " + b);
  // test foobar
}

Answer 3

如果有人搜索如何使用 Composition API 在 Vue3中发出工作：

在子组件中：

<script setup>

  const emit = defineEmits(["updateItem", "updateCount"])

  function itemizedLot() {
    emit("updateItem", param1, param2)
  }

  function countedLot() {
    emit("updateCount", param3, param4)
  }

</script>

<template>
  <button @click="itemizedLot"> Btn1 </button>
  <button @click="countedLot"> Btn2 </button>
</template>

在父组件中：

<script setup>

  // access the emitted methods and their parameters

  function updateMenuItem(param1, param2) {
    ...
  }

  function updateMenuCount(param3, param4) {
    ...
  }

</script>

<template>
  <MyButton @update-item="updateMenuItem" @update-count="updateMenuCount"/>
</template>