How to $emit in vuejs-CodePudding

vuejs emit doesen'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>

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"  placeholder="preparatory/bachelor/engineering..">
        <input type="text"  placeholder="University..">
        <input type="text"  placeholder="Where?..">
        <h6>Start date</h6>
        <input type="date"  value="2017-09-15" min="2017-09-15" max="2021-09-15">
        <div >    
            <h6>End date</h6>
            <div >
                <h6>present</h6><input type="checkbox" name="" id="checkbox" @click="checked">
            </div>
        </div>
        <input type="date"  v-if="show" value="2017-09-15" min="2017-09-15">
        <div >
            <button  @click="$emit('open')"><i ></i></button>
        </div>
        <div >
            <button >next <i ></i></button>
        </div>
    </form>
</div>

the script

<script>
export default {
    props:{
        plus: Boolean
    },

    data(){
        return{
            show: true,
        }
    },

i thought this is working but it seems like it's not

CodePudding user response：

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

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