taro vue3中有多个页面都引用了一个组件,然而切换页面时组件触发所派发的事件只会被当前页面的组件接收,其他页面无法接收

waxmsbnn  于 2023-02-04  发布在  其他
关注(0)|答案(1)|浏览(250)

相关平台

微信小程序

小程序基础库: 2.19.4
使用框架: Vue 3

复现步骤

####navTabs组件

<scroll-view 
  class="nav-tabs-scroll"
  :style="{width: showExpand ? scrollWidth : '100%'}"
  :scroll-x="true"
>
   <view
    :class="{'tab-item': true, 'actived': curTab === tIdx}"
     v-for="(tab, tIdx) in tabs" 
    :key="tIdx"
     @tap="handleClickTab(tIdx)"
   >{{tab.Name}}</view>
</scroll-view>

const handleClickTab = (idx) => {
  curTab.value = idx
  emit("changeTab", idx)
}

####index页面

<NavTabs :tabs="cateList" :current="curCateIdx" @changeTab="handleChangeTab" />

import NavTabs from "@/components/NavTabs"

const handleChangeTab = (e) => {
  console.log('首页tab切换', e)
  curCateIdx.value = e
}

####group页面

<CateTabs :tabs="current.cates" :current="current.cateIdx" :showExpand="true" @changeTab="handleChangeCate" />

import CateTabs from "@/components/NavTabs"

const handleChangeCate = (e) => {
  console.log('分类tab切换', e)
  const current = obj.platformData[obj.curPlatIdx]
  current.cateIdx = e
}

在index页面时navTabs组件可以正常切换类目,可进入group页面后,group页面中的navTabs组件有效,index页面中的navTabs就失效了,再切回index页面点击navTabs却触发了group页面中的navTabs

期望结果

组件可以准确派发事件被自己接收

实际结果

几个相同组件派发的事件不能被准确接收

环境信息

👽 Taro v3.3.3

  Taro CLI 3.3.3 environment info:
    System:
      OS: Windows 10
    Binaries:
      Node: 12.12.0 - C:\Program Files\nodejs\node.EXE
      Yarn: 1.22.10 - ~\AppData\Roaming\npm\yarn.CMD  
      npm: 6.11.3 - C:\Program Files\nodejs\npm.CMD

相关问题