组合式写法 vue3中点击事件传递事件对象

在Vue 3中，也可以使用组合式API来处理点击事件并传递事件对象。具体来说，可以使用`on`函数来绑定点击事件，并在回调函数中访问事件对象。例如：

import { on } from 'vue'

export default {
  setup() {
    const handleClick = (event) => {
      console.log(event)
      // 处理点击事件
    }

    return {
      handleClick
    }
  }
}

然后在模板中使用`v-on`指令来绑定`handleClick`方法：

<button v-on:click="handleClick($event)">点击</button>

这样就可以在`handleClick`方法中访问事件对象，并对其进行处理。需要注意的是，使用组合式API时，需要导入`on`函数，并且事件对象需要作为回调函数的第一个参数传入。

相关问题

vue3中点击事件传递事件对象

在Vue 3中，可以通过在模板中使用`$event`来传递事件对象。具体来说，可以像这样在模板中绑定点击事件并传递事件对象：

<button @click="handleClick($event)">点击</button>

然后在组件的methods中定义`handleClick`方法来处理点击事件：

methods: {
  handleClick(event) {
    console.log(event)
    // 处理点击事件
  }
}

这样就可以在`handleClick`方法中访问事件对象，并对其进行处理。

vue3组合式子传父没有点击事件

根据提供的引用内容，我理解您想了解如何在Vue3组合式API中将子组件的值传递给父组件，但是没有点击事件。在这种情况下，您可以使用Vue3的自定义事件来实现这一目标。具体步骤如下：

1. 在子组件中，使用`defineEmits`定义一个自定义事件，例如`update:sonValue`。

2. 在子组件中，使用`$emit`触发自定义事件，并将需要传递给父组件的值作为参数传递，例如`$emit('update:sonValue', sonValue.value)`。

3. 在父组件中，使用`v-on`监听子组件触发的自定义事件，并将传递过来的值保存到父组件的变量中，例如`<Son v-on:update:sonValue="value => sonValue = value"></Son>`。

下面是一个示例代码，演示了如何在Vue3中使用自定义事件将子组件的值传递给父组件：

子组件Son.vue：

<template>
  <div>
    <h1>这是子组件</h1>
    <hr>
    <el-row>
      这是暴露给父组件的值： {{ sonValue }}
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { ref, defineEmits } from 'vue';

const sonValue = ref('这是子组件的值');

defineEmits(['update:sonValue']);

function updateSonValue(newValue: string) {
  sonValue.value = newValue;
  // 触发自定义事件，将新的值传递给父组件
  $emit('update:sonValue', newValue);
}

// 将需要暴露给父组件的值和函数添加到defineExpose中
defineExpose({
  sonValue,
  updateSonValue
});
</script>

<style scoped>
</style>

父组件Parent.vue：

<template>
  <div>
    <h1>这是父组件</h1>
    <el-input v-model="value" placeholder="请输入内容，父组件输入框"></el-input>
    <hr>
    <el-row>
      <Son v-on:update:sonValue="value => sonValue = value"></Son>
    </el-row>
    <hr>
    <el-row>
      父组件中的值：{{ sonValue }}
    </el-row>
  </div>
</template>

<script setup lang="ts">
import Son from './Son.vue';
import { ref } from 'vue';

const value = ref('这是父组件的初始value值');
const sonValue = ref('');

</script>

<style scoped>
</style>