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>