在 Vue 上，如何在另一个组件中使用一个组件的功能？答案

【问题标题】：on Vue, how to use a function from a component in another component?在 Vue 上，如何在另一个组件中使用一个组件的功能？
【发布时间】：2019-04-11 13:02:03
【问题描述】：

我有这个组件，功能“注销”如下：

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

我该怎么做？

【问题讨论】：

标签： javascript authentication vue.js vue-component logout

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

选项 1.（插件）如果任一组件需要以编程方式调用 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>

【讨论】：