1
1

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

// @/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>

|

    2

    3

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

    <template>
        <button @click="logout">Log Out</button>
    </template
    
    <script>
    export default {
        name: "LogoutButton",
        methods: {
            logout() {
                // logout logic
            },
        }
    }
    </script>
    

    <template>
        <div class="navbar">
            <LogoutButton/>
        </div>
    </template>
    
    <script>
    import LogoutButton from './LogoutButton.vue';
    
    export default {
        name: "NavBar",
        components: {
            LogoutButton
        }
    }
    </script>
    
    |
    • 2
    1

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

    |