在 Vue 上，如何在另一个组件中使用一个组件的函数？

Question

我有这个组件，其功能 "logout" 如下所示：

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

我需要在 Navbar.vue 中使用 Painel.vue 中定义的函数 "logout"，如下所示：

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

我该怎么做？

Answer 1

有两种方法可以做到这一点。您应该使用哪个取决于函数的调用方式。

选项 1.（插件）如果任一组件需要以编程方式调用 logout 函数，而不是仅仅包含一个用于严格注销目的的按钮。例如，如果一个组件包含像 "Submit and Logout" 这样的按钮，那么 logout 是附加功能，需要以编程方式调用。

在这种情况下，您应该将 logout 重构为一个单独的 plugin，用作在 Vue 中提供全局范围的功能或其他属性的一种方式。

一个例子：

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

Vue.use(LogoutPlugin);

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

然后logout可以用this.$logout()调用。

选项 2.（组合）如果两个组件只需要有注销按钮，那么您可以通过创建一个 LogoutButton 组件来完成此操作两个组件。

示例：

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

Answer 2

您可以创建 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>

然后在任何组件中，您可以使用 this.$bus.$emit('logout')

发出 logout 事件

链接： creating event bus

在 Vue 上，如何在另一个组件中使用一个组件的函数？

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

javascript

authentication

vue.js

vue-component

logout