Vue中$emit的用法

子组件可以使用$emit调用父组件的方法并传递数据、

子组件：

<template>
    <button @click="emitEvent">点击我</button>
</template>
<script>
    export default{
        data(){
            return{
                msg:'我是子组件的数据'
            }
        },
        methods:{
            emitEvent(){
                //通过按钮的点击事件触发方法，然后用$emit触发一个my-event的自定义方法，传递this.msg数据。
                this.$emit('my-event',this.msg)
            }
        }
    }
</script>

父组件：

<template>    
        <div id="app">
            <child-a @my-event="getMyEvent"></child-a>
            //父组件通过监测my-event事件执行一个方法，然后取到子组件中传递过来的值。
        </div>
    </template>
    <script>
        import childA from './child.vue';
        export default {
            components:{
                childA
            },
            methods:{
                getMyEvent(msg){
                 console.log('接收数据---'+msg);
                 //接收数据，我是子组件的数据
                }
            }
        }
    </script>