VueJS 2 $emit和$on

Question

我使用VueJS 2，我真的不知道如何从子组件到父组件之间进行通信。

我有两个组件：Dashboad和

在DashboardPanel，中，我有一个方法：

execute () {
    // emit to parent
    this.$emit('executeSQL', this.value)
    ...
}

在仪表板中：

mounted () {
   // get event from DashboardPanel
   this.$on('executeSQL', function(value) {
        alert(value)
   })
}

什么都没有发生，我在文档中找不到使用$on的地方，也不知道是否可以用其他方法实现它？

Answer 1

您必须在Dashboard组件中指定如何对来自DashboardPanel组件的executeSQL事件作出反应。在Dashboard的HTML模板中

<DashboardPanel v-on:executeSQL="doExecuteSQL($event)" />

doExecuteSQL建立Dashboard的一种方法

methods: {
  doExecuteSQL(value) { ... }
}

希望这能帮上忙。