vue3中点击事件传参

在Vue 3中，可以通过以下几种方式实现点击事件传参:

1. 使用箭头函数定义click事件的回调函数，将需要传递的参数作为箭头函数的参数。例如，在模板中定义一个click事件，并将需要传递的参数作为参数传递给回调函数:

<template>
  <div>
    <button @click="handleClick(item)">点击按钮</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      item: {
        id: 1,
        name: 'example'
      }
    }
  },
  methods: {
    handleClick(item) {
      console.log(item);
      // 在这里可以对item进行操作或者触发其他操作
    }
  }
}
</script>

这样，当点击按钮时，会将item作为参数传递给handleClick方法。

2. 使用自定义事件来传递参数。在setup函数中，可以通过使用emit来触发自定义事件，并将需要传递的参数作为emit的第二个参数。例如：

import { ref, onMounted } from 'vue';

export default {
  setup() {
    const item = ref({
      id: 1,
      name: 'example'
    });

    const handleClick = () => {
      emit('select', item.value);
    };

    return {
      handleClick
    };
  }
};

这样，在模板中可以使用自定义事件select，并将item作为参数传递给它。例如：

<template>
  <div>
    <button @click="handleClick">点击按钮</button>
  </div>
</template>

<script>
export default {
  emits: ['select'],
  setup(props, { emit }) {
    const item = {
      id: 1,
      name: 'example'
    };

    const handleClick = () => {
      emit('select', item);
    };

    return {
      handleClick
    };
  }
}
</script>

在这个例子中，当点击按钮时，会触发自定义事件select，并将item作为参数传递给它。

总结一下，在Vue 3中，可以通过箭头函数定义click事件的回调函数，将需要传递的参数作为箭头函数的参数，或者使用自定义事件来传递参数。这样就可以实现在点击事件中传递参数的功能。