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

Question

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

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

我需要在 Navbar.vue 中使用 Painel.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()

我怎样才能做到这一点？

Answer 1

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

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

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

一个例子：

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

Vue.use(LogoutPlugin);

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

然后可以使用this.$logout() 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事件

链接： 创建事件总线