子组件向父组件通过$emit传值

1.子组件： 

<template>
    <div class="app">
       <input @click="sendMsgToParent" type="button" value="给父组件传递值">
    </div>
</template>
<script>
export default {
 
    data () {
        return {
            //将msg传递给父组件
            msg: "我是子组件的msg",
        }
    },
     methods:{
         sendMsgToParent(){
             //func: 是父组件指定的传数据绑定的函数，this.msg:子组件给父组件传递的数据
             this.$emit('func',this.msg)
         }
     }
}
</script>

2.父组件

<template>
    <div class="app">
        <child @func="getMsgFromSon"></child>
        <button @click='view'>查看值</button>    
    </div>
</template>
<script>
import child from './child.vue'
export default {
    data () {
        return {
            msgFormSon: "this is msg",
         
        }
    },
    components:{
        child,
    },
    methods:{
            getMsgFromSon(data){
                this.msgFormSon = data
               
            },
            view(){
                console.log(this.msgFormSon);
            }
    }
}
</script>

完毕！

注意：button的绑定的事件不能是getMsgFromSon，否则第二次点击的时候造成传过来的值丢失。