vue3列表绑定冒泡点击事件，获取点击事件绑定key的值

在 Vue 3 中，你可以使用 `$event` 参数来获取点击事件对象，并通过事件对象获取到当前点击的元素。然后，你可以使用 `getAttribute` 方法来获取当前元素上绑定的 `key` 值。

具体步骤如下：

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" :data-key="item.id">
    {{ item.name }}
  </li>
</ul>

上面的代码中，我们将 `item.id` 绑定到 `li` 元素的 `data-key` 属性上，表示该元素的唯一标识。

3. 在 `handleClick` 方法中，获取点击的元素，并通过 `getAttribute` 方法获取 `data-key` 属性的值：

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

上面的代码中，我们通过 `event.target` 属性获取到点击的元素，然后使用 `closest` 方法找到最近的 `li` 元素，并通过 `getAttribute` 方法获取该元素的 `data-key` 属性的值。

这样，当用户点击列表项时，就会触发 `handleClick` 方法，并通过 `$event` 参数传递点击事件，从而获取到当前点击的元素，并获取到该元素上绑定的 `key` 值。