Vue3中如何区分带事件与不带事件的组件并添加特殊类？

在Vue3里，你可以通过以下方式判断组件是否绑定了事件，无需额外添加props：

• 使用useAttrs()获取组件绑定的所有属性与事件
  Vue3的组合式API中，useAttrs()会返回一个包含所有父组件传入的属性和事件的响应式对象。原生DOM事件会被自动转换为on[驼峰事件名]的格式（比如click事件对应onClick），自定义事件则会转换为on[驼峰事件名]（比如my-event对应onMyEvent）。

• 计算属性判断事件是否存在
  通过计算属性监听useAttrs()返回的对象，判断目标事件是否存在：

  import { useAttrs, computed } from 'vue'
  
  export default {
    props: ['text'],
    setup() {
      const attrs = useAttrs()
      // 判断是否绑定了click事件
      const hasClickEvent = computed(() => !!attrs.onClick)
  
      return { hasClickEvent }
    }
  }
  

• 动态绑定类名
  在组件模板中，根据判断结果动态添加需要的类：

  <template>
    <div 
      :class="{ 'hover-effect': hasClickEvent }"
    >
      {{ text }}
    </div>
  </template>
  
  <style scoped>
  .hover-effect:hover {
    cursor: pointer;
    background-color: #f5f5f5;
    /* 这里添加你的hover样式 */
  }
  </style>
  

如果是使用Options API，也可以直接通过this.$attrs来判断：

export default {
  props: ['text'],
  computed: {
    hasClickEvent() {
      return !!this.$attrs.onClick
    }
  }
}

注意：useAttrs()返回的是响应式对象，但不能直接解构，否则会失去响应性，需要直接访问对象属性。

内容的提问来源于stack exchange，提问作者NQ1024