Vue3+Quasar中q-tabs的@input事件失效及Tab标题传递问题

问题原因 #

你使用的是q-route-tab，这类路由绑定标签的选中状态由Vue Router控制，而非q-tabs组件内部管理，因此q-tabs的@input事件不会自动触发。直接用@click只能拿到指针事件，是因为没有手动传递Tab实例参数。

方案一：给单个Tab绑定带参数的点击事件 #

直接在每个q-route-tab上绑定点击事件，主动传递当前Tab对象：

修改模板代码：

<!-- Tabs -->
<div v-if="tabs" class="page-toolbar_tabs">
  <q-tabs
    no-caps
    align="left"
    narrow-indicator
    indicator-color="white"
    class="text-white"
  >
    <q-route-tab
      v-for="(tab, index) in tabs"
      :key="index"
      :to="tab.path"
      :name="tab.name"
      :label="$t(tab.label)"
      :ripple="false"
      exact
      @click="() => onTabChange(tab)"
    />
  </q-tabs>
</div>

脚本中调整onTabChange方法，直接获取并传递Tab标题：

methods: {
  onTabChange(tab) {
    const tabTitle = this.$t(tab.label) // 获取翻译后的标题
    console.log(tabTitle)
    this.$emit('onTabChange', tabTitle)
  }
}

方案二：监听路由变化（更符合路由Tab的设计逻辑） #

因为q-route-tab和路由绑定，通过监听路由变化匹配对应Tab，更贴合组件设计：

脚本代码：

data() {
  return {
    tabs: [] // 你的Tabs配置数组
  }
},
watch: {
  '$route'(to) {
    // 匹配当前路由对应的Tab
    const currentTab = this.tabs.find(tab => tab.path === to.path)
    if (currentTab) {
      this.onTabChange(currentTab)
    }
  }
},
methods: {
  onTabChange(tab) {
    const tabTitle = this.$t(tab.label)
    console.log(tabTitle)
    this.$emit('onTabChange', tabTitle)
  }
}

模板无需修改，保持原有的q-tabs和q-route-tab结构即可，路由切换时会自动触发监听逻辑。

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