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>
    

      

  • 相关阅读:
    运算符的优先级
    % 取余运算 取模运算
    Java运算符,关系运算符
    自增自减 a++,++a,a--,--a
    Java运算符,算术运算符
    启用div作为编辑器 添加contentEditalbe = “true”,如何让在Html中特殊字符不被转义
    一个合格前端必看的书籍
    JQuery中eq()和get()的区别
    div,contenteditable编辑器之ctrl+enter换行,enter发送
    Angularjs 源码
  • 原文地址:https://www.cnblogs.com/winyh/p/10936588.html
Copyright © 2011-2022 走看看