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重构为单独的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>

在根组件（例如App.vue）中定义方法logout之后。并在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')事件

链接： creating event bus

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

2 个答案: