父组件未监听子组件 $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开发者工具中看到事件被发射出去了，但是由于某种原因，父组件没有接收到它，doneEditing函数从未被调用。我是否漏掉了一些明显的东西？

- Quiver

---

@Bert：父级没有模板，但子级有，所以我将其添加到OP中。希望这能有所帮助？ - Quiver

是的。你想要“观察”什么？观察应该是一个对象。除此之外，这里的主要问题似乎是你从未为“doneEditing”事件设置监听器。 - Bert

@Bert 哎呀，我已经更正了 watch 部分，那只是我在这里发布时的一个笔误。我该如何监听事件？我认为父组件总是在监听，但我对 Vue 还比较新，所以可能很容易犯错。 - Quiver

Answer 1

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

this.$emit("done-editing")

这是因为HTML中的属性不区分大小写，如果您将模板呈现到DOM中，则最好避免使用驼峰命名法。请注意，如果您在字符串中定义模板或使用单文件组件，则不适用此规则。

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

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

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

- Bert

---

这正是我缺少的。非常感谢您的帮助，以及关于HTML和驼峰命名法的提示！ - Quiver

@Quiver 没问题 :) - Bert