on Vue, how to use a function from a component in another component?

Question

I have this component, with the function "logout" like below:

// @/component/Painel.vue
<template></template>
<script>
export default {
  name: 'panel',
  methods: {
    logout: function () {
      this.$session.destroy()
      this.$router.push('/')
    }
  }
}
</script>

I need to use the function "logout" defined in Painel.vue in the Navbar.vue, like below:

// @/component/Navbar.vue
<template>
<div class="navbar">
    <a @click="logout" class="nav-link m-2 my-2 my-md-0" >Sair</a>
</div>
</template>

<script>
export default {
    name: 'navbar'
}
</script>

I've tried to import the component and use the function like this, but didnt work

import Painel from '@/components/authentication/Painel.vue'
...
this.logout()

How can i do this?

Answer 1

There are two ways to do this. Which you should use depends on how the function needs to be called.

Option 1. (Plugin) If either component needs to call the logout function programmatically, rather than just containing a button for the strict purpose of logging out. For example, if one component contains a button like "Submit and Logout" then logout is additional functionality and needs to be called programmatically.

In this case, you should refactor logout into a separate plugin , which are used as a way to provide globally-scoped functionality or other attributes in Vue.

An example:

const LogoutPlugin {
    install(Vue, options) {
        Vue.prototype.$logout = function() {
            // logout logic
        }
    }
}

Vue.use(LogoutPlugin);

new Vue({
   // ... options
})

Then logout can be called with this.$logout() .

Option 2. (Composition) If both components just need to have logout buttons, then you can accomplish this by creating a LogoutButton Component that you place inside of both components.

Example:

<template>
    <button @click="logout">Log Out</button>
</template

<script>
export default {
    name: "LogoutButton",
    methods: {
        logout() {
            // logout logic
        },
    }
}
</script>

Then place a LogoutButton in any component that needs it. Like this:

<template>
    <div class="navbar">
        <LogoutButton/>
    </div>
</template>

<script>
import LogoutButton from './LogoutButton.vue';

export default {
    name: "NavBar",
    components: {
        LogoutButton
    }
}
</script>

Answer 2

You can create EventBus for communication between components.

<script>
import Vue from 'vue'

Vue.prorotype.$bus = new Vue()

//app init
</script>

After define method logout in your root component, for example App.vue. And add event listener in mounted

<script>
export default {
    mounted () {
        this.$bus.$on('logout', () => this.logout())
    },
    methods: {
        logout () {
            this.$session.destroy()
            this.$router.push('/')
        }
    }
}
</script>

then in any component you can emit logout event with this.$bus.$emit('logout')

links: creating event bus