Question

我正在跟踪教程，他们正在做一个项目。一切都很完美，我做得很好。但我遇到一个错误。我有一个组件（Home.vue），内部有一个按钮。如果用户单击按钮，则将打开一个模式（使用BULMA scss框架，没有js）。当单击按钮时，将出现另一个组件（Add.vue），在该组件中写入实际的模态代码。我通过<Add></Add>组件将属性Home.vue传递给Add.vue。此属性值表明模式是否激活。

这是home.vue

<template>
<div>
<nav class="panel column is-offset-2 is-8">
    <p class="panel-heading">
        VueJs Phonebook
        <button class="button is-link is-outlined" @click="openAdd">
            Add New
        </button>
    </p>

</nav>

<Add :openmodal='addActive'></Add>

</div>
</template>

<script>
let Add = require('./Add.vue')
export default {
    components:{Add},
    data(){
        return{
            addActive:''
        }
    },

    methods:{
        openAdd(){
            this.addActive = 'is-active';
        }
    }
}
</script>

我已成功获取Add.vue中的属性，但模式具有cancle和close按钮。我曾经写过一种叫做close的方法。如果单击按钮，this.$emit('closeRequest');应该在vue开发工具中创建一个事件。但是如果单击取消或关闭按钮，则不会创建任何事件。

这是Add.vue文件

<template>
 <div class="modal" :class="openmodal">
    <div class="modal-background"></div>
    <div class="modal-card">
        <header class="modal-card-head">
        <p class="modal-card-title">Modal title</p>
         <button class="delete" aria-label="close" @click='close'> 
</button>
        </header>
        <section class="modal-card-body">
        <!-- Content ... -->
        </section>
        <footer class="modal-card-foot">
        <button class="button is-success">Save changes</button>
        <button class="button" @click='close'>Cancel</button>
        </footer>
    </div>
</div>
</template>
<script>
export default{
    props:['openmodal'],
    methods:{
        close(){
            this.$emit('closeRequest');
        },
    }
}
</script>

Answer 1

    <template>
<div>
<nav class="panel column is-offset-2 is-8">
    <p class="panel-heading">
        VueJs Phonebook
        <button class="button is-link is-outlined" @click="openAdd">
            Add New
        </button>
    </p>

</nav>

<Add :openmodal='addActive' @closeRequest='closeAdd'></Add>

</div>
</template>

<script>
let Add = require('./Add.vue')
export default {
    components:{Add},
    data(){
        return{
            addActive:''
        }
    },

    methods:{
        openAdd(){
            this.addActive = 'is-active';
        },
        closeAdd(){
            this.addActive = '';
        }
    }
}
</script>

JavaScript：this。$ emit（'closeRequest'）在vue开发工具中未创建任何事件

1 个答案: