美文网首页
vue的父子组件传值

vue的父子组件传值

作者: 舒尔诚 | 来源:发表于2022-03-02 21:48 被阅读0次

    1. 子组件editTree向父组件传:调用父组件的方法createClick,data为参数

    this.$emit("createClick",data)  
    父组件中代码:
    同时组件标签添加@
    
            <edit-tree ref="editTree" @createClick="createClick"  >
    
        1)输出一个参数
        子组件:
        this.$emit('closeChange',false);
        父组件:
    
            <posilCom @closeChange="closeCom($event)"></posilCom>
            closeCom(msg) {
                this.msg = msg;
            }
    
        2)输出多个参数,使用arguments定义接收
        子组件:
    
            this.$emit('closeChange',false,true);
    
        父组件:
    
            <posilCom @closeChange="closeCom(arguments)"></posilCom>
            closeCom(msg) {
                this.a= msg[0];
                this.b= msg[1];
            }
    

    2.父组件向子组件customizeTree.vue传值:子组件使用props接收

    子组件中代码:
    
            export default {
                 props: {
                    activeId: {
                      type: Number
                    },
                    treeData: {
                      type: Array
                    },
                    level: {
                      type: Number
                    }
                  }
              }
    
    父组件中:
    
           <customize-tree :tree-data="treeData"></customize-tree>
    
       注意:父组件通过prop传的值,子组件不能修改

    相关文章

      网友评论

          本文标题:vue的父子组件传值

          本文链接:https://www.haomeiwen.com/subject/dsberrtx.html