可以借用公共父元素。子组件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. java线程基础巩固---线程生命周期以及start方法源码剖析

    上篇中介绍了如何启动一个线程,通过调用start()方法才能创建并使用新线程,并且这个start()是非阻塞的,调用之后立马就返回的,实际上它是线程生命周期环节中的一种,所以这里阐述一下线程的一个完整 ...

  2. celery+django+mq 异步任务与定时任务

    参考 celerypip install celery==4.1.1https://www.cnblogs.com/wdliu/p/9530219.htmlhttps://www.jianshu.co ...

  3. springboot请求体中的流只能读取一次的问题

    场景交代 在springboot中添加拦截器进行权限拦截时,需要获取请求参数进行验证.当参数在url后面时(queryString)获取参数进行验证之后程序正常运行.但是,当请求参数在请求体中的时候, ...

  4. MySQL JSON类型

    MySQL支持JSON数据类型.相比于Json格式的字符串类型,JSON数据类型的优势有: 存储在JSON列中的JSON文档的会被自动验证.无效的文档会产生错误: 最佳存储格式.存储在JSON列中的J ...

  5. C# 将Excel以文件流转换DataTable

    /* *引用 NuGet包 Spire.XLS */ /// <summary> /// Excel帮助类 /// </summary> public class ExcelH ...

  6. json.loads 报错 json.decoder.JSONDecodeError

    json.loads报json.decoder.JSONDecodeError: Expecting property name enclosed in double quotes 出现这个错误其实只 ...

  7. barcode模块: plus.barcode.scan 进行扫描图片出现无法识别二维码,打印的错误信息是code:8,message:''

    原因之一:图片的像素太大了,无法识别. 解决方法: 压缩一下图片. 这里的 data 我放了一个  像素为 4040 × 4040 的 图片. 进行识别的时候会报, (无法识别的图片,都是返回这些值) ...

  8. Windows 7 [Web应用程序项目***已配置为使用IIS。无法访问IIS元数据库,您没有足够的特权访问计算机上的IIS网站]

    如下所示,我最近也遇到这个类似的错误(Win7 + IIS7.0),最后如下图解决 系统用户权限问题, 通过管理员运行 即可正常使用.

  9. [ERROR ] The Salt Master has cached the public key for this node, this salt minion will wait for 10 seconds before attempting to re-authenticate

    2.salt master已缓存此节点的公钥,此salt minion将等待10秒,然后再尝试重新验证. [ERROR ] The Salt Master has cached the public ...

  10. Selenium常见异常分析及解决方案

    pycharm中导入selenium报错 现象: pycharm中输入from selenium import webdriver, selenium标红 原因1: pycharm使用的虚拟环境中没有 ...