javascript - VUE非父子组件间通信
ringa_lee
ringa_lee 2017-04-11 12:10:57
[JavaScript讨论组]

非父子组件间的值变化时的通知,没有事件!,怎么单纯的让一个子组件知道另外一个子组件中的某个值变化

父组件中有两个子组件

list接收父组件传过来的三个值

现在要点击list的某个图片时,detail可以得到img的值

detail 跟 home 的关系是这样的,这个时候怎么让detail知道 点击list时对应的img值并显示

这是home页,有四个list

这是detail,由于不知道怎么获得对应的值,图片没显示出来

ringa_lee
ringa_lee

ringa_lee

全部回复(3)
天蓬老师

按照楼主所述的业务场景,此处完全可以使用vue-router的编程式导航功能。在点击对应的List组件时,获取到该List的相关信息,然后通过router.push({ path: '/detail', params: { img: '**' }})动态导航到Detail组件.在Detail组件中的导航钩子函数beforeRouteEnter 中获取到通过导航传入的参数,然后进行Detail组件的渲染。

高洛峰

复杂的使用vuex。
简单的可以通过event bus。

vuex文档

event bus demo

PHP中文网
  1. vuex里面定义一个currentImagestate,再定义一个changeCurrentImagemutation用于改变currentImage

  2. List.vue的click事件中调用$store.commit('changeCurrentImage', item.src)来设置vuex里的全局currentImage

  3. Detail.vue中用<img :src="$store.state.currentImage" >来显示。

具体实现参考vuex的官方文档

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号