Vue中点击自定义组件无法切换状态的问题咨询

这是Vue组件开发里很常见的小坑，我来给你掰扯清楚：

问题根源：普通元素和组件的事件绑定逻辑不同 #

• 当你给<span>这种原生HTML元素绑@click时，Vue会自动把它解析成原生的click事件监听，点击后直接触发对应的方法，所以之前绑定在父span上时一切正常。
• 但当你把@click绑在ArrowSwitcher这种自定义组件上时，Vue默认会把这个click当成一个自定义事件，而不是原生点击事件。也就是说，除非你的ArrowSwitcher组件内部主动触发了click这个自定义事件，否则外部绑定的@click="switcher"根本不会被执行。

两种解决办法，按需选择： #

1. 用.native修饰符（仅Vue 2可用）

直接在组件的点击事件后面加.native，告诉Vue你要监听的是组件根元素的原生点击事件，而不是自定义事件：

<span class='targeting-global__name'>
  Targeting Global
  <ArrowSwitcher :showContent='showContent' @click.native='switcher'/></span>

2. 在组件内部主动派发事件（Vue 2/Vue 3通用，更推荐）

如果ArrowSwitcher是你自己维护的组件，最好在组件内部处理原生点击，然后主动向外触发事件，这更符合Vue组件的设计规范。比如在ArrowSwitcher.vue里：

<template>
  <!-- 假设组件的根元素是个div或图标 -->
  <div @click="$emit('click')">
    <!-- 你的箭头切换器内容 -->
  </div>
</template>

这样外部绑定的@click="switcher"就能正常触发了。如果需要传递点击相关的参数，还可以写成$emit('click', $event)，外部用@click="switcher($event)"接收就行。

注意：Vue 3已经移除了.native修饰符，所以Vue 3项目里优先用第二种方法哦～

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