可以借用公共父元素。子组件A  this.$emit("eventName", data) 触发事件,父组件监听事件,更改父组件 data , 通过Props 传值到子组件B,子组件B watch Props(注意不是watch 子组件B自身data)

     <el-tab-pane label="组织信息" name="second">
<el-row :gutter="30">
<el-col :span="6">
<!-- 组织组件子组件A -->
<Organization @callBackInfo="handleInfo"></Organization>
</el-col> <el-col :span="18">
<!-- 部门领导信息子组件B -->
<LeaderHead :partInfo="infos" ></LeaderHead> <!-- 人员信息 -->
<PersonTable></PersonTable>
</el-col>
</el-row>
</el-tab-pane>

  

// 父组件
methods: {
handleClick(tab, event) {
console.log("tab 切换");
},
handleInfo(data){
console.log({prop:data})
this.infos = data
},
}

  

// 子组件A
methods:{
getOrganizationTree(){
this.$axios.get(
"/api/dingtalk/getDeptTree",
{ headers: { "Content-Type": "application/x-www-form-urlencoded" }
}
)
.then( res => {
var result = res.data;
if (result.success) {
console.log(result.data)
this.treeData = [result.data]
let partInfo = [
{name:"管理员:", value:"熊涛"},
{name:"会话ID:", value:"dafasdfadsfasdf"},
{name:"部门所有者:", value:"熊涛1000"}
]
this.$emit("callBackInfo", partInfo)
console.log(50050)
} else {
alert(result.message)
}
})
},
}

  

// 子组件B
<script>
export default {
name:"LeaderHead",
props:["partInfo"],
data(){
return {
infos:this.partInfo
}
},
watch:{
partInfo(){
console.log({PART:this.partInfo})
this.infos = this.partInfo;
}
},
mounted(){
this.infos = this.partInfo;
}
}
</script>

  

Vue 子组件与子组件之间传值的更多相关文章

  1. 深度剖析Vue中父给子、子给父、兄弟之间传值!

    本片文章将为您详细讲解在Vue中,父给子传值.子给父传值以及兄弟之间传值方式! 父传子:父组件 // template里面 <aa :info="name"/> // ...

  2. vue.js+koa2项目实战(五)axios 及 vue2.0 子组件和父组件之间的传值

    axios 用法: 1.安装 npm install axios --save-dev 2.导入 import axios from 'axios'; 3.使用 axios.post(url,para ...

  3. [Vue]子组件与父组件之间传值

    1.父组件与子组件传值props 1.1定义父组件,父组件传递 inputText这个数值给子组件: //父组件 //引入的add-widget组件 //使用 v-bind 的缩写语法通常更简单: & ...

  4. VUE中的子父组件、兄弟组件之间相互传值,相互调用彼此的方法

    vue--组件传值 父组件传值给子组件--"props" 一.父组件--示例 <template> <child :choose-data="choos ...

  5. Vue 组件&组件之间的通信 之 子组件向父组件传值

    子组件向父组件传值:子组件通过$.emit()方法以事件形式向父组件发送消息传值: 使用步骤: 定义组件:现有自定义组件com-a.com-b,com-a是com-b的父组件: 准备获取数据:父组件c ...

  6. Vue 组件&组件之间的通信 之 父组件向子组件传值

    父组件向子组件传值:父组件通过属性向下传值的方式和子组件通信: 使用步骤: 定义组件:现有自定义组件com-a.com-b,com-a是com-b的父组件: 准备获取数据:com-b要获取父组件dat ...

  7. EasyDSS RTMP流媒体服务器web前端:vue组件之间的传值,父组件向子组件传值

    之前接触最多的都是EasyNVR,主要针对的都是前端的一些问题.也有接触到一些easydss流媒体服务器. 前端方面的,EasyDSS流媒体服务器与EasyNVR有着根本的不同.EasyNVR使用的是 ...

  8. EasyDSS高性能RTMP、HLS(m3u8)、HTTP-FLV、RTSP流媒体服务器web前端:vue组件之间的传值,父组件向子组件传值

    前端方面,EasyDSS流媒体服务器与EasyNVR有着根本的不同.EasyNVR使用的是传统的js来进行开发,而EasyDSS使用的是webpack+vue来进行开发的,了解vue+webpack的 ...

  9. Vue父子,子父,非父子组件之间传值

    Vue组件基础 纯属随笔记录,具体详细教程,请查阅vue.js网站 子组件给父组件传值: <body> <div id="app"> <my-app& ...

随机推荐

  1. Ubuntu系统---以virtualenv方式安装Tensorflow-CPU

    Ubuntu系统---以virtualenv方式安装Tensorflow-CPU 一.安装环境 环境:Ubuntu18.04+CPU+python2.7 本文介绍:如何在ubuntu上以virtual ...

  2. GDI根据位图和透明度创建蒙版

    #include <windows.h> LRESULT CALLBACK WndProc(HWND hWnd, UINT message, WPARAM wParam, LPARAM l ...

  3. Solving Docker permission denied while trying to connect to the Docker daemon socket

    The error message tells you that your current user can’t access the docker engine, because you’re la ...

  4. python瞎练

    需求:有不规则列表 singlelist3 = [ '总计', '每吨人工:', '总人工', 1748.07, '金额'],如果当前元素为字符串且该元素的下一个相邻位置仍为字符串,那么请在该元素后面 ...

  5. 2、django后端:课程表、课程详细表

    1.课程表录入数据 有些人卖接口,接口就是 数据 1.课程表 2张表+3张表 分布式数据库分表 数据库优化 垂直分表 1000w条数据,999w条数据不常看,经常查的1w条数据放在另一个表 水平分表 ...

  6. 生成和安装requirements.txt依赖

    pip freeze > requirements.txt pip install -r < requirements.txt

  7. Python模块之目录

     1.加密算法有关 hmac模块 hashlib模块 2.进程有关 multiprocessing模块 3.线程有关 threading模块 4.协程有关 asyncio模块 5.系统命令调用 sub ...

  8. MyEclipse运行项目出现 The user operation is waiting for "Building workspace" to complete

    如图所示 解决方式 1.选择菜单栏的“Project”,然后把菜单栏中“Build Automatically”前面的对钩去掉. 2.当你修改或添加代码后,选择菜单栏的“Project”,然后选择菜单 ...

  9. linux 安装go环境

    https://golang.google.cn/dl/ 进入这个地址选择一个版本下载 wget https://dl.google.com/go/go1.13.4.linux-amd64.tar.g ...

  10. Luogu P4141 消失之物 背包 分治

    题意:给出$n$个物品的体积和最大背包容量$m$,求去掉一个物品$i$后,装满体积为$w\in [1,m]$背包的方案数. 有 N 个物品, 体积分别是 W1, W2, …, WN. 由于她的疏忽, ...