如何在 vuejs 中使用 $emit

Question

VueJS 发出不起作用，我正在尝试更改布尔值，但它不想发出更改

这是第一个组件：

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

脚本：

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

带有发射的第二个组件：

<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>

脚本：

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

我认为这是有效的，但似乎不是

Answer 1

您应该使用组件名称而不是 div 元素：

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