Vuejs: Access a Parent Method from Child Component-CodePudding

I can't access the parent method from a child component. I did what the official document stated.

Parent template:

<template>
  <v-app>
    <v-sheet height="100vh">
      <v-sheet height="100vh" >
        <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>

DrawerComponent:

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>

At the line:

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

the below error raises:

TypeError: this.$parent.displayComponent is not a function

CodePudding user response：

It's not a good practice to use $parent, but instead of that you could use emit to send an event from the child component to run some method in parent one :

in the Child component emit the event with your payload :

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

in parent one:


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

and change div to component in


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