javascript - parent 不听 child $emit - VueJS

Question

这是子组件:

Vue.component("training-edit", {
    template: "#training-edit-template",
    props: ["show"],
    data: function () {
        return {
            form: new Form(),
            isWorking: false
        }
    },
    watch: {
        show: function (val) {
            if (val) {
                $("#editTrainingModal").modal("show");
            } else {
                $("#editTrainingModal").modal("hide");
            }
        }
    },
    methods: {
        onCancel: function () {
            this.$emit("doneEditing");
        }
    }
});

这是父级:

new Vue({
    el: "#trainingEditContainer",
    data: {
        isWorking: false,
        showEditTraining: false
    },
    methods: {
        onEdit: function (e) {
            e.preventDefault();
            this.showEditTraining = true;
        },
        doneEditing: function () {
            this.showEditTraining = false; 
        }
    }
});

HTML:

<div id="trainingEditContainer" class="row">
    // unrelated stuff here

    <training-edit v-bind:show="showEditTraining"></training-edit>
</div>
<script id="training-edit-template" type="x-template">
    <modal-right modalId="editTrainingModal">
        <div class="modal-header">
            <button type="button" class="close" v-on:click="onCancel" aria-label="close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title">Edit Training</h4>
        </div>
        @Html.Partial("Partial/_EditPartial")
    </modal-right>
</script>

我可以在 Chrome 的 Vue 开发人员工具中看到事件正在发出，但由于某种原因， parent 没有听到它并且从未调用过 doneEditing 函数。我在这里遗漏了什么明显的东西吗？

Answer 1

首先，我建议您将事件名称更改为done-editing。

this.$emit("done-editing")

这是因为 HTML 中的属性不区分大小写，如果您要将某些模板渲染到 DOM，最好全部设为 avoid camelCased names .请注意，如果您在字符串中定义模板或使用单个文件组件，则这不适用。

然后你需要在组件上监听它。

<training-edit @done-editing="doneEditing" v-bind:show="showEditTraining">

当您从组件发出事件时，父组件必须显式监听该事件。