Question

这是我的基地App.vue，它存放着router-view：

<template>
<div>
    <Navbar/>

    <div class="container-fluid">
        <router-view></router-view>
    </div>
</div>
</template>

<script>
import Navbar from './components/Navbar.vue';

export default {
    name: 'App',
    components: {
        Navbar
    }
}
</script>

在Navbar.vue中，我有一个方法：

methods: {
    getLoggedStatus(){
        console.log('asdasd')
    }
}

最后，我有一个Login.vue装载在router-view上。我想从getLoggedStatus()中的Navbar.vue中访问Login.vue。我该如何实现？

我尝试将ref放在Navbar中的App.vue标签上：

<Navbar ref="navvy"/>

并使用以下命令调用Login.vue：

this.$refs.navvy.getLoggedStatus()

但这不起作用。

Answer 1

裁判仅适用于儿童。您正在应用内渲染<Navbar>，因此无法从登录名调用该引用。您只能从this.$refs.navvy访问App.vue。

针对您的问题有几种解决方案。

从登录名向App发送事件，因此App从引用调用该方法。

您可以在路由器视图中将侦听器设置为：

<router-view  @loggedStatus="callLoggedStatus"  />

在您的登录名中，当您要调用导航栏getLoggedStatus时，您将发出该事件：

this.$emit('loggedStatus')

然后在App.vue中，您将定义一个调用引用的callLoggedStatus方法：

callLoggedStatus() {
  this.$refs.navvy.getLoggedStatus();
}

鉴于您将引用添加到APP模板中的<Navbar>组件中。

可以说，该解决方案与您建议的代码最相似，但是我认为这很麻烦，您应该避免使用它，因为这样您最终可以在App.vue中监听很多不同的事件。

使用Vuex

我不完全知道getLoggedStatus的作用，但是如果您想更改用户登录时导航栏的行为，则可能应该设置vuex存储，因此您可以在此注册用户是否登录。然后在navbar组件中，根据是否登录用户有条件地渲染事物。

@Lana的回答遵循了这个想法，可能是最接近Vue的官方瘦身方法。

使用事件发射器

如果您想直接在不属于同一系列的组件之间进行通信，我认为事件发射器是一个合理的选择。创建应用后，您可以设置应用范围的事件发射器：

const app = new Vue({...});
window.emitter = new Vue();

（在示例中，我们使用新的Vue作为事件发射器。还有“事件”模块，允许使用EventEmitter）

然后任何组件都可以使用它来发送消息，因此Login可以：

window.emitter.$emit('user-logged', myCustomPayload);

另一方面，Navbar可以做到：

window.emitter.$on('user-logged', function() {
  this.getLoggedStatus();
})

在Vue社区中没有很好地考虑最后一个选项-首选Vuex-但对于小型应用程序，我认为这是最简单的。

肮脏的黑客

您始终可以将组件导出到窗口。您可以在导航栏created钩子中进行以下操作：

created() {
  window.Navbar = this;
}

然后可以随时在Login.vue中：

window.Navbar.getLoggedStatus()

它将起作用。但是，这肯定是一种反模式，如果您开始使用多个组件来进行此操作，则可能会对您的项目可维护性造成很多损害。

Answer 2

似乎getLoggedStatus返回了应用程序的某些全局状态。使用Vuex来管理这些全局变量。

创建这样的商店：

// Make sure to call Vue.use(Vuex) first if using a module system
const store = new Vuex.Store({
  state: {
    loggedStatus: 0
  },
  getters: {
    getLoggedStatus: state => {
      // to compute derived state based on store state
      return state.loggedStatus 
    }
  }
})

如果需要根据存储状态计算派生状态，请在任何Vue组件中使用store.state.loggedStatus来访问全局状态，或使用store.getters.getLoggedStatus之类的吸气剂。

Vue-从其他组件调用方法（使用vue-routes）

2 个答案:

从登录名向App发送事件，因此App从引用调用该方法。

使用Vuex

使用事件发射器

肮脏的黑客