[Vuejs]-How to access 'layout' or 'page' function directly in component?

by

0👍

You could use Vue’s provide/inject feature for this. For instance, a page/layout could provide the getMap():

<template>
  <MapButton />
</template>

<script>
export default {
  name: 'MapPage',
  provide() {
    return {
      getMap() {
        return { /* map */ }
      }
    }
  }
}
</script>

…and then any child component on that page/layout could inject the method where needed:

<template>
  <button @click="getMap">Get map</button>
</template>

<script>
export default {
  name: 'MapButton',
  inject: {
    getMap: {
      default() {
        return () => {
          console.log('no map')
        }
      }
    }
  },
  mounted() {
    console.log('map', this.getMap())
  }
}
</script>

Leave a comment