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>