vue兄弟组件传参

最新推荐文章于 2024-04-10 08:53:44 发布

原创最新推荐文章于 2024-04-10 08:53:44 发布 · 2k 阅读

CC 4.0 BY-SA版权

文章标签：

30 篇文章

订阅专栏

20 篇文章

订阅专栏

本文聚焦Vue前端开发中兄弟组件的通信问题。针对兄弟组件相隔距离不同的情况，分别给出通信方法。相隔不远时，可通过父组件中转；相隔太远时，可创建js文件，还需注意v-if逻辑判断下的调用顺序和延迟设置，避免传值或调用函数失败。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.兄弟1通过this.$emit()调用父组件函数,修改data中的某值,再通过prop传递到兄弟2

需要注意,如果兄弟组件2为v-if="active=1"的逻辑判断,还未创建的情况下,需要先赋值父组件data,再修改active=1,否则可能父组件data还未修改成功,兄弟组件2已经提前created了,导致传值是失败

2.兄弟1通过this.$emit()调用父组件函数,父组件通过this.refs.xxRef.xxFun()调用子组件函数

这里需要注意,与上面相反,如果兄弟组件2为v-if="active=1"的逻辑判断,还未创建的情况下,需要先修改active=1,再调用兄弟组件2函数,否则可能出现兄弟组件2还未初始化,调用函数失败

1.如果兄弟2不为v-if
首先创建一个js(bus.js) 文件，导出vue 对象

import Vue from 'vue'

export default new Vue();

兄弟1调用兄弟2函数

import Bus from "@/bus";

setListInfo(info){
   // 向弹窗组件传递当前选中信息  'getListInfo'  接受的方法名   info 传递的值
   Bus.$emit('setListInfo', info)
}

兄弟2组件注册函数事件

import Bus from "@/Bus";

created() {
   // 获取兄弟组件传来的值
   Bus.$on("setListInfo", (info) => {
     console.log(info);
     this.info = info
   }
}

2.如果兄弟2为v-if,需要设置延迟,否则调用失败
兄弟1调用兄弟2函数

import Bus from "@/bus";

setListInfo(info){
	this.$emit('setActive',1)
	setTimeout(() => {
        Bus.$emit('setListInfo', info)
      }, 2000)
}

兄弟2组件注册函数事件

import Bus from "@/Bus";

created() {
   // 获取兄弟组件传来的值
   Bus.$on("setListInfo", (info) => {
     console.log(info);
     this.info = info
   }
}