这是子组件:
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"></script>
我在Chrome的Vue开发者工具中看到事件被发射出去了,但是由于某种原因,父组件没有接收到它,
doneEditing
函数从未被调用。我是否漏掉了一些明显的东西?
watch
部分,那只是我在这里发布时的一个笔误。我该如何监听事件?我认为父组件总是在监听,但我对Vue
还比较新,所以可能很容易犯错。 - Quiver