vue3列表绑定冒泡点击事件，获取点击事件参数

在 Vue 3 中，你可以使用 `v-for` 指令来循环遍历一个数组并渲染成列表，然后使用 `@click` 指令来绑定点击事件。如果你想要使用冒泡事件来获取点击事件参数，可以通过 `$event` 参数来获取。

具体步骤如下：

1. 在数据中定义一个数组，用来存储列表的数据：

data() {
  return {
    items: [
      { id: 1, name: 'item 1' },
      { id: 2, name: 'item 2' },
      { id: 3, name: 'item 3' },
    ],
  };
},

2. 在模板中使用 `v-for` 指令循环遍历数组，渲染成列表，并在 `li` 元素上使用 `@click` 指令来绑定点击事件：

<ul @click="handleClick($event)">
  <li v-for="item in items" :key="item.id">
    {{ item.name }}
  </li>
</ul>

上面的代码中，我们将 `@click` 指令放在 `ul` 元素上，表示监听整个列表的点击事件，并将 `$event` 参数传递给 `handleClick` 方法。

3. 在 `handleClick` 方法中，获取点击的列表项的数据：

methods: {
  handleClick(event) {
    const item = event.target.closest('li');
    console.log(`clicked item ${item.dataset.id}`);
  },
},

上面的代码中，我们通过 `event.target` 属性获取到点击的元素，然后使用 `closest` 方法找到最近的 `li` 元素，并从 `dataset` 属性中获取到该元素的 `id` 数据。

这样，当用户点击列表项时，就会触发 `handleClick` 方法，并通过 `$event` 参数传递点击事件，从而获取到点击的列表项的数据。