zoukankan      html  css  js  c++  java
  • 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>
    

      

  • 相关阅读:
    POJ 1548 Robots(最小路径覆盖)
    <html>
    站点开发-日志-1
    JSP入门实战下
    rancher官方资源
    window10死机
    window10桌面图标空白
    sentry使用docker-compose部署
    docker下一步步部署sentry
    docker-compose编排服务
  • 原文地址:https://www.cnblogs.com/winyh/p/10936588.html
Copyright © 2011-2022 走看看