на Vue, как использовать функцию из компонента в другом компоненте? - PullRequest
Новая
       25

на Vue, как использовать функцию из компонента в другом компоненте?

0 голосов
/ 08 ноября 2018

У меня есть этот компонент с функцией «logout», как показано ниже: 

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

Мне нужно использовать функцию «logout», определенную в Painel.vue в Navbar.vue, как показано ниже: 

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

Я пытался импортировать компонент и использовать функцию, подобную этой, но не работал 

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

Как я могу это сделать?

Ответы [ 2 ]

0 голосов
/ 08 ноября 2018

Вы можете создать EventBus для связи между компонентами. 

<script>
import Vue from 'vue'

Vue.prorotype.$bus = new Vue()

//app init
</script>

После определения метода logout в корневом компоненте, например, App.vue. И добавьте прослушиватель событий в mounted

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

тогда в любом компоненте вы можете генерировать logout событие с this.$bus.$emit('logout')

ссылки: создание шины событий

0 голосов
/ 08 ноября 2018

Есть два способа сделать это. То, что вы должны использовать, зависит от того, как должна вызываться функция.

Опция 1. (плагин) Если любому компоненту необходимо вызывать функцию logout программно, а не просто содержать кнопку для строгой цели выхода из системы. Например, если один компонент содержит кнопку типа «Отправить и выйти», то logout - это дополнительная функция, которую необходимо вызывать программно.

В этом случае вам следует преобразовать logout в отдельный плагин , который используется как способ предоставления функциональности глобальной области действия или других атрибутов в Vue.

Пример: 

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

Vue.use(LogoutPlugin);

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

Тогда logout можно вызвать с помощью this.$logout().

Вариант 2. (Композиция) Если для обоих компонентов просто необходимы кнопки выхода из системы, это можно сделать, создав LogoutButton Компонент, который вы поместите в оба компонента.

* +1025 * Пример: 
<template>
    <button @click="logout">Log Out</button>
</template

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

Затем поместите LogoutButton в любой компонент, который нуждается в этом. Как это: 

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

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

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