vue子组件向父组件传值this.$emit用法

一、在父组件中

1.将子组件引入父组件

import RelationalGraph from "@/views/atlas/relationequip.vue"

 2.定义组件

components:{
    RelationalGraph,
},

3.引用子组件 

<RelationalGraph ref="RealtionalGraph"/>

二、子组件中 

4.封装一个方法并调用

方法名随意，子向父传值使用

this.$emit("eventname",parmas);

//1.在data中有建一个对象并赋值
//2.在methods中定义一个方法，并放入$emit
//3.在需要调用方法的地方调用方法，如mounted中或者按钮点击事件中
data:{
    return {
        FormData:{
            data1:'a',
            data2:'b',
},
        //FormData为需要传递的数据，可以是对象，数组，单个的值
    }
},

monunted(){
    this.sonToFather();
    //调用传递的方法名，注意加this
},

methods(){
    sonToFather(){
        this.$emit("getFormData",this.FormData);
        //前面为事件名，用于父组件调用，后面为要传递的值，注意加this
    }
}

三、回到父组件中

5.父组件中的引用子组件处添加函数

@eventname="function"

<RelationalGraph ref="RelationalGraph" @getFormData="receiveFormData"/>

 6.父组件的methods中写入function获取传过来的值

data:{
    return {
        fatherFormData:{},
    }
}
methods:{
    receiveFormData(val){
        this.fatherFormData=val;//val为形参，代表传过来的FormData，可以随便写
    }
}

注意：子传父过程中的事件名不是方法名，跟那个sonToFather这个单词没有任何关系