Events Vue.js自定义事件问题

几个小时来我一直在努力解决这个问题，但我不确定我的vue自定义事件出了什么问题

<!-- part of the vue template: the main element -->
<!-- not working <button @click='$emit(\"open-modal-zone\")'></button> -->
<!-- not working <button @click='activateFilterModalViaEmit'></button> -->
<modal-zone :filter-obj='filterObj' @open-modal-zone='modalActive=true' @close-modal-zone='modalActive=false' v-if='modalActive' ></modal-zone>

<!-- the component in question -->
Vue.component('modal-zone', {
props : ["filterObj", "modalActive"],
template: "<div id='modal-zone'>" +
  "<p @click='$emit(\"close-modal-zone\")'>Close</p>" +
  "<filter-modal-dialog-controls :filter-obj='filterObj'></filter-modal-dialog-controls>" +
  "</div>"
});

<!-- filter-dialog-controls component omitted (I haven't gotten that far yet) -->

// the vue js of my app
var v = new Vue({
    el : "#editing-div",
    data : {
        modalActive : false,
        filterObj : {
            filterModalActive : false
        }
    },
    methods : {
        activateFilterModalViaEmit : function(){
            this.$emit("open-modal-zone"); //why doesn't this work?
        }
        activateFilterModal : function(){
            this.modalActive = true; // this works.. but I want $emit!
        }
    }
});

Vue.组件（‘模态区域’{
道具：[“filterObj”，“modalActive”]，
模板：“”+
“close
”+
"" +
""
});
//我的应用程序的vue js
var v=新的Vue({
el:“编辑部”，
数据：{
错，
过滤器BJ：{
filterModalActive:false
}
},
方法：{
activateFilterModalViaEmit:函数（）{
这个。$emit（“打开模式区域”）；//为什么不工作？
}
activateFilterModal:函数（）{
this.modalActive=true；//这是可行的..但我想要$emit！
}
}
});

问题是，虽然我能够从组件区域内部发出关闭事件（单击元素），但我不能从我的主vue对象的方法发出关闭事件，而且我也不能通过将

this.$emit（“打开模式区域”）

粘贴到我要用来打开此模式组件的按钮中来发出关闭事件。

---

现在，我想直观地通过

$emit

函数来执行我的事件，但是在这种情况下，我能做些什么使我的open函数真正工作呢？

emit用于从子级到父级的通信。在根组件中发出事件没有意义

如果你需要父母和孩子之间的交流，你只需要把道具从父母传给孩子。 其他选项是全局事件总线。看一些例子

---

或者对于更复杂的情况，您可以使用

emit用于从子级到父级通信的事件。从根组件发出事件的含义是什么？所以，你说的是，我知道上面提到的“直接”方式，是父母与孩子沟通的最佳实践？好吧，如果这就是它的工作原理，我可以接受！如果你把它作为一个答案，如果没有人提供任何相反的论据或更详细的例子，那么它可能是正确的答案。谢谢