vue兄弟组件传参

兄弟组件之间相隔不是太远

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
   }
}