非父子组件间的值变化时的通知,没有事件!,怎么单纯的让一个子组件知道另外一个子组件中的某个值变化
父组件中有两个子组件
list接收父组件传过来的三个值
现在要点击list的某个图片时,detail可以得到img的值
detail 跟 home 的关系是这样的,这个时候怎么让detail知道 点击list时对应的img值并显示
这是home页,有四个list
这是detail,由于不知道怎么获得对应的值,图片没显示出来
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
按照楼主所述的业务场景,此处完全可以使用vue-router的编程式导航功能。在点击对应的List组件时,获取到该List的相关信息,然后通过router.push({ path: '/detail', params: { img: '**' }})动态导航到Detail组件.在Detail组件中的导航钩子函数beforeRouteEnter 中获取到通过导航传入的参数,然后进行Detail组件的渲染。
复杂的使用vuex。
简单的可以通过event bus。
vuex文档
event bus demo
vuex里面定义一个
currentImagestate,再定义一个changeCurrentImagemutation用于改变currentImage在
List.vue的click事件中调用$store.commit('changeCurrentImage', item.src)来设置vuex里的全局currentImage在
Detail.vue中用<img :src="$store.state.currentImage" >来显示。具体实现参考vuex的官方文档