Vue 子组件与子组件之间传值
可以借用公共父元素。子组件Athis.$emit(“eventName”, data) 触发事件,父组件监听事件,更改父组件 data , 通过Props 传值到子组件B,子组件B watch Props(注意不是watch 子组件B自身data)<el-tab-pane label="组织信息" name="second"><el-row :gutter="30"><
·
可以借用公共父元素。子组件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>
更多推荐
已为社区贡献5条内容
所有评论(0)