vue.js - VueJS 2 $emit 和 $on

Question

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

我有 2 个组件:Dashboad 和 DashboardPanel。

在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 事件作出 react 。在 Dashboard 的 HTML 模板中:

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

doExecuteSQL 是Dashboard 的一个方法:

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

希望这会有所帮助。