how to $emit in vuejs

Question

VueJS emit doesn't work, I'm trying to change the value of a boolean, but it doesn't want to emit the change

here is the first component:

<template>
    <div id="reg">
        <div id="modal">
            <edu></edu>
        </div>
        <div :plus="plus" v-if="plus" @open="plus = !plus">
            abc
        </div>
    </div>
</template>

the script:

<script>
    import edu from './education/edu.vue'
    export default {
        components: {
            edu
        },
    
        data() {
            return {
                plus: false
            }
        }
    }
</script>

the second component with the emit:

<template>
    <div id="container">
        <h2>Education</h2>
        <form action="">
            <input type="text" class="input" placeholder="preparatory/bachelor/engineering..">
            <input type="text" class="input" placeholder="University..">
            <input type="text" class="input" placeholder="Where?..">
            <h6>Start date</h6>
            <input type="date" class="input" value="2017-09-15" min="2017-09-15" max="2021-09-15">
            <div class="end-date">    
                <h6>End date</h6>
                <div class="flexend">
                    <h6>present</h6><input type="checkbox" name="" id="checkbox" @click="checked">
                </div>
            </div>
            <input type="date" class="input" v-if="show" value="2017-09-15" min="2017-09-15">
            <div class="flex-end">
                <button class="btn-plus" @click="$emit('open')"><i class="fas fa-plus"></i></button>
            </div>
            <div class="flex-end">
                <button class="btn">next <i class="fas fa-arrow-right"></i></button>
            </div>
        </form>
    </div>
</template>

the script:

<script>
    export default {
        props:{
            plus: Boolean
        },
    
        data(){
            return{
                show: true,
            }
        },

I thought this is working, but it seems like it's not

Answer 1

You should use the component name instead of the div element :

<edu :plus="plus" v-if="plus" @open="plus = !plus">
   abc
</edu>