Nostalgia
V2EX  ›  Vue.js

Vue 如何实现根据当前所在页面不同决定点击后的不同行为?

  •  
  •   Nostalgia · Jan 2, 2023 · 3334 views
    This topic created in 1400 days ago, the information mentioned may be changed or developed.
    Vue 如何实现根据当前所在页面不同决定点击后的不同行为?

    现在有两个不同的页面 A 、B ,复用了同一个 component C ( eg. 侧边栏,或顶部导航栏,是全局的)
    A 页面是主页面,希望点击 C 的链接后,局部刷新;
    B 页面是个不重要的帮助 /说明页面,希望点击 C 的链接后,跳转到 A ,全局刷新。

    野生前端请教下这个该怎么实现?谢谢大家。
    10 replies  •  2023-03-18 10:24:03 +08:00
    learningman
    learningman
    Jan 2, 2023❤️1
    1
    你给这个 component 加个 onClick prop 不就完事
    loading
    loading
    Jan 2, 2023 via Android❤️1
    2
    提示一下

    console.log(window.location.pathname)
    rubyfans
    rubyfans
    Jan 2, 2023 via Android❤️1
    3
    给 C 这个组件新加一个跳转行为类型的属性,然后在使用这个组件的地方传给 C
    elboble
    elboble
    Jan 2, 2023 via Android❤️1
    4
    要不 router 守卫下?根据新老 path
    vivipure
    vivipure
    Jan 2, 2023❤️1
    5
    要么组件暴露个 click 事件给调用方,要么在 c 组件内部根据路由进行不同的操作。推荐第一种
    tuutoo
    tuutoo
    Jan 2, 2023❤️1
    6
    我做的话,可能是这样:
    在 c 组件里 emit 这个 click 事件, 子事件传给父(A 和 B), 在 A 和 B 中监听 C 的 Click 事件, 做不同的处理.
    ragnaroks
    ragnaroks
    Jan 3, 2023❤️1
    7
    简单直接的做法就是根据当前路由,不过楼上说的将事件上抛也不错。
    Envov
    Envov
    Jan 3, 2023❤️1
    8
    把 component C 的点击事件 emit 出去,由页面 A 、B 决定具体行为

    如果你把点击时候的逻辑封装成了多个,可以把逻辑 emit 出去,例如:
    在页面 a 中:
    <ComponentC onClick="({runA,runB})=>runA()">
    在页面 b 中
    <ComponentC onClick="({runA,runB})=>runB()">
    ComponentC 中的实现是 this.emit('click',{runA(){},runB(){}})
    liaoliaojun
    liaoliaojun
    Jan 3, 2023❤️1
    9
    用 Provide / Inject ,实现更优雅点吧
    WilliamLin
    WilliamLin
    Mar 18, 2023 via iPhone
    10
    根据当前路由在 click 事件中做判断
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Privacy   ·   Solana   ·   5305 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 66ms · UTC 03:39 · PVG 11:39 · LAX 19:39 · JFK 22:39
    ♥ Do have faith in what you're doing.