VueJS 2 $发射和$ 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)
   })
}

没有任何反应，我在doc中找不到使用 $ on 的地方，我不知道我是否可以用其他方式来实现它？

Answer 1

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

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

doExecuteSQL采用Dashboard的方法：

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

希望这会有所帮助。