Vue 子组件与子组件之间传值
可以借用公共父元素。子组件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 子组件与子组件之间传值的更多相关文章
- 深度剖析Vue中父给子、子给父、兄弟之间传值!
本片文章将为您详细讲解在Vue中,父给子传值.子给父传值以及兄弟之间传值方式! 父传子:父组件 // template里面 <aa :info="name"/> // ...
- vue.js+koa2项目实战(五)axios 及 vue2.0 子组件和父组件之间的传值
axios 用法: 1.安装 npm install axios --save-dev 2.导入 import axios from 'axios'; 3.使用 axios.post(url,para ...
- [Vue]子组件与父组件之间传值
1.父组件与子组件传值props 1.1定义父组件,父组件传递 inputText这个数值给子组件: //父组件 //引入的add-widget组件 //使用 v-bind 的缩写语法通常更简单: & ...
- VUE中的子父组件、兄弟组件之间相互传值,相互调用彼此的方法
vue--组件传值 父组件传值给子组件--"props" 一.父组件--示例 <template> <child :choose-data="choos ...
- Vue 组件&组件之间的通信 之 子组件向父组件传值
子组件向父组件传值:子组件通过$.emit()方法以事件形式向父组件发送消息传值: 使用步骤: 定义组件:现有自定义组件com-a.com-b,com-a是com-b的父组件: 准备获取数据:父组件c ...
- Vue 组件&组件之间的通信 之 父组件向子组件传值
父组件向子组件传值:父组件通过属性向下传值的方式和子组件通信: 使用步骤: 定义组件:现有自定义组件com-a.com-b,com-a是com-b的父组件: 准备获取数据:com-b要获取父组件dat ...
- EasyDSS RTMP流媒体服务器web前端:vue组件之间的传值,父组件向子组件传值
之前接触最多的都是EasyNVR,主要针对的都是前端的一些问题.也有接触到一些easydss流媒体服务器. 前端方面的,EasyDSS流媒体服务器与EasyNVR有着根本的不同.EasyNVR使用的是 ...
- EasyDSS高性能RTMP、HLS(m3u8)、HTTP-FLV、RTSP流媒体服务器web前端:vue组件之间的传值,父组件向子组件传值
前端方面,EasyDSS流媒体服务器与EasyNVR有着根本的不同.EasyNVR使用的是传统的js来进行开发,而EasyDSS使用的是webpack+vue来进行开发的,了解vue+webpack的 ...
- Vue父子,子父,非父子组件之间传值
Vue组件基础 纯属随笔记录,具体详细教程,请查阅vue.js网站 子组件给父组件传值: <body> <div id="app"> <my-app& ...
随机推荐
- docker零碎知识
一.关于容器的时区配置: docker中如果对时区不加限制,默认会采用GMT时间,对于东八区来说,需要修改,修改方式有多种: 1.在Dockerfile中的修改 FROM centos: MAINTA ...
- Linux系统管理常用命令
Linux系统管理常用命令 分类: Linux2011-01-10 18:26 1538人阅读 评论(0) 收藏 举报 linuxcommandservicenginxuserunix 目录(?)[+ ...
- kubernetes Configmap secret的使用
kubernetes configmap 核心作用是让配置信息和镜像解耦,pod可以使用configmap的数据生成配置文件.如果后端的pod配置文件要改变时,只需要更改下configmap里面的数据 ...
- HGOI20191114 CSP模拟赛 反思
Problem A 宇宙魔方 有一个$N \times N \times N$的魔方,每一次操作可以整体转动该魔方,也可以对于一层整体+X. 给出最后魔方的最终状态,其中有一个位置为-1.利用其它位置 ...
- 【luoguP1182】数列分段 Section II
题目描述 对于给定的一个长度为N的正整数数列A-i,现要将其分成M(M≤N)段,并要求每段连续,且每段和的最大值最小. 关于最大值最小: 例如一数列4 2 4 5 1要分成3段 将其如下分段: [4 ...
- java8 stream流操作的flatMap(流的扁平化)
https://mp.weixin.qq.com/s/7Fqb6tAucrl8UmyiY78AXg https://blog.csdn.net/Mark_Chao/article/details/80 ...
- Android学习_注意事项
一. Fragment中加载ListView public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle ...
- 【redis 学习系列】API的理解与使用(三)
4.列表 列表(list)类型是用来存储多个有序的字符串,如图2-18所示,a.b.c.d.e五个元素从左到右组成一个有序列表,列表中的每个字符串称为元素,一个列表最大可以存储2^32-1个元素.在R ...
- java什么时候进行垃圾回收,垃圾回收的执行流程
java的垃圾回收分为 三个区域新生代 老年代 永久代 一个对象实例化时 先去看伊甸园有没有足够的空间如果有 不进行垃圾回收 ,对象直接在伊甸园存储.如果伊甸园内存已满,会进行一次minor gc然后 ...
- 18.二叉树的镜像 Java
题目描述 操作给定的二叉树,将其变换为源二叉树的镜像. 输入描述 二叉树的镜像定义:源二叉树 8 / \ 6 10 / \ / \ 5 7 9 11 镜像二叉树 8 / \ 10 6 / \ / \ ...