Vuejs：从子组件访问父组件方法

Question

我无法从子组件访问父方法。我按照official document 所说的做了。

父模板：

<template>
  <v-app>
    <v-sheet height="100vh">
      <v-sheet height="100vh" class="overflow-y-auto">
        <div ref="ComponentDisplay" :is="currentComponent"></div>
      </v-sheet>
      <DrawerComponent></DrawerComponent>
    </v-sheet>
  </v-app>
</template>

<script>
export default {
  name: 'Dashboard',
  data: function () {
    return {
      currentComponent: null
    }
  },
  methods: {
    displayComponent (component) {
      this.currentComponent = component
    }
  }
}
</script>

抽屉组件：

export default {
  name: 'DrawerComponent',
  methods: {
    exit: function () {
      logout()
    },
    swapComponent: function (component) {
      this.$parent.displayComponent(this.components[component])
    }
  },
  data: () => ({
    drawer: false,
    group: null,
    mini: true,
    components: {}
  }),
  watch: {
    group () {
      this.drawer = false
    }
  }
}
</script>

在线：

this.$parent.displayComponent(this.components[component])

出现以下错误：

TypeError: this.$parent.displayComponent 不是函数

Answer 1

使用$parent 不是一个好习惯，但您可以使用emit 从子组件发送事件以在父组件中运行某些方法：

在子组件中使用您的有效负载发出事件：

    swapComponent: function (component) {
      this.$emit("swap-component",this.components[component])
    }

在父母一中：

 <DrawerComponent @swap-component="displayComponent"></DrawerComponent>

并将div 更改为component

<div ref="ComponentDisplay" :is="currentComponent"></div>