一般情况原生标签才有点击事件，而自定义组件@click是无效的，如果想要实现，则需要.native修饰符强行绑定，或者使用父传子$emit('事件名')实现。

.native

修饰符.native的作用是将事件绑定到组件的根元素上，而不是组件内部的子元素。默认情况下，Vue会将事件绑定到组件内部的子元素上，而不会直接绑定到组件的根元素上。如果希望在父组件中直接监听到自定义组件根元素的事件，就需要使用.native修饰符。

例如，对于自定义组件 <custom-component>，如果希望在父组件中监听到其根元素的点击事件，可以使用@click.native来绑定原生的点击事件。

<template>
  <div>
    <custom-component @click.native="handleClick"></custom-component>
  </div>
</template>

在上述代码中，使用@click.native将原生的点击事件绑定到自定义组件的根元素上，并通过handleClick方法来处理点击事件。

需要注意的是，使用.native修饰符时，自定义组件的根元素需要添加$listeners属性来接收父组件传递的事件监听器。这样，在父组件中就可以监听到自定义组件根元素的原生事件。

$emit()

要给自定义组件绑定点击事件，在自定义组件中需要使用$emit方法触发一个自定义事件，并在父组件中监听该自定义事件来执行相应的操作。具体操作如下：

在自定义组件中：

在模板中，给需要绑定点击事件的元素添加@click事件监听器，并调用$emit方法触发一个自定义事件。例如：

<template>
  <div class="custom-component" @click="handleClick">
    <!-- 自定义组件的内容 -->
  </div>
</template>

<script>
export default {
  methods: {
    handleClick() {
      this.$emit('custom-click'); // 触发自定义事件
    }
  }
}
</script>

在上述代码中，给自定义组件的根元素添加了点击事件监听器@click，并在handleClick方法中调用$emit方法触发了一个名为custom-click的自定义事件。

在父组件中： 2. 在父组件的模板中使用自定义组件，并监听自定义事件。例如：

<template>
  <div>
    <custom-component @custom-click="handleCustomClick"></custom-component>
  </div>
</template>

<script>
export default {
  methods: {
    handleCustomClick() {
      // 自定义组件点击事件的处理逻辑
    }
  }
}
</script>

在上述代码中，使用<custom-component>自定义组件，并在自定义组件上通过@custom-click监听自定义事件。当自定义组件触发custom-click事件时，会调用handleCustomClick方法来执行相应的处理逻辑。

通过以上操作，可以给自定义组件绑定点击事件，并在父组件中监听自定义事件来执行相应的操作。需要注意的是，自定义组件内部的点击事件需要通过$emit方法触发自定义事件，父组件才能监听到该事件并执行相应的处理逻辑。

修饰符 .native 强行给自定义组件绑定事件

.native

$emit()