VUE--$emit(将子级的值传递给父级)

准备工作?

参照以下链接：

准备工作：VUE--Props(子级接收父级传来的数据)-CSDN博客

具体实现

Parent.vue

<template>
    <h2>Parent</h2>
    <div>
        <Child @someEvent="getHandler"/>
    </div>
    <p>{{ msg }}</p>
</template>

<script>
    import Child from "./Child.vue";
    export default {
        data(){
            return{
                msg:''
            }
        },
        components:{
            Child
        },
        methods:{
            getHandler(data){
                console.log("收到了子级发来的信号")
                this.msg = data
            }
        }
    }
</script>

?

Child.vue

<template>
    <h2>Child</h2>
    <button @click="sendHandler">将子级的数据传递给父级</button>
</template>

<script>
    export default {
        data(){
            return{
            }
        },
        methods:{
            sendHandler(){
                this.$emit("someEvent","子级传来的值")
                /* $emit有两个参数，
                    第一个可理解为传递给父级的接收值,第二个可理解为想要传给父级的数据
                * */
            }
        }
    }
</script>