vue3自定义事件传参

在Vue3中，可以通过自定义事件传递参数。首先，在`setup()`函数中实现`click`事件，并绑定自定义事件。`setup()`函数接受两个参数，`props`和`{ emit }`。其中，`emit`用于触发自定义事件。例如，可以创建一个名为`singerDetail`的函数，用来处理点击事件，并通过自定义事件`select`传递参数。代码如下所示：

setup(props, { emit }) {
  const singerDetail = (item) => {
    emit('select', item)
  }
  return {
    singerDetail
  }
}

接下来，在模板中使用该自定义事件。假设存在一个`<ul>`列表，每个`<li>`都需要传递当前项的数据。可以通过在`<li>`元素上绑定`click`事件，并将需要传递的参数作为事件的参数。例如：

<ul>
  <li ref="groupRef" v-for="item in group.list" :key="item.id" class="item" @click="singerDetail(item.mid)">
    <span class="avatar">
      <el-image :src="item.pic" lazy />
    </span>
    <a class="name">{{item.name}}</a>
  </li>
  <el-divider style="width: 100%" border-style="dashed" />
</ul>

在上述代码中，通过`@click="singerDetail(item.mid)"`将`item.mid`作为事件参数传递给`click`事件。

最后，在需要使用该自定义事件的组件中实现自定义函数。可以使用`let`关键字声明一个变量来接收参数，然后在函数内部进行相应的操作。例如，可以创建一个名为`selectSinger`的函数，接收`singer`作为参数，然后将该参数传递给路由跳转中的`params`参数。代码如下所示：

selectSinger(singer) {
  let mySelectSinger = singer;
  this.$router.push({
    name: 'singerDetail',
    params: {
      mySelectSinger: mySelectSinger
    }
  })
}

通过以上步骤，就可以在Vue3中实现自定义事件传参。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *2* *3* [vue3的自定义事件传参](https://blog.csdn.net/mfxcyh/article/details/125242529)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 100%"]
[ .reference_list ]