Question

我已经创建了一个后端，现在正尝试使用它来构建一个前端。我对Vue.js还是很陌生，很难告诉它做什么。可能是因为缺少一些基本概念。希望有人可以指出正确的方向。

App.vue对以下组件进行分组：页眉，主要部分（已路由），页脚和模式登录对话框。
我要解决的问题是单击“登录”按钮（位于标题组件中）时显示模式登录对话框。目前，除了正在记录的消息以外，什么都没有发生。
为此，我创建了事件总线并触发了一个事件：

export default {
  name: 'SppdTeamTunerHeader',
  methods: {
    emitShowLoginDialogEvent () {
      EventBus.$emit('ShowLoginDialog', true)
    }
  }
}

发出事件的方法可以在适用于Chrome的Vue DevTools中看到。

这是App.vue的完整代码：

<template>
  <div id="app">
    <SppdTeamTunerHeader/>
    <router-view></router-view>
    <SppdTeamTunerFooter/>

    <LoginDialogModal
      v-show="isLoginDialogVisible"
    />
  </div>
</template>

<script>
import SppdTeamTunerHeader from '@/components/TheHeader'
import SppdTeamTunerFooter from '@/components/TheFooter'
import LoginDialogModal from '@/components/LoginDialogModal'
import { EventBus } from '@/common/EventBus'

export default {
  name: 'App',
  components: {
    SppdTeamTunerHeader,
    SppdTeamTunerFooter,
    LoginDialogModal
  },
  data: function () {
    return {
      isLoginDialogVisible: false
    }
  },
  mounted () {
    EventBus.$on('ShowLoginDialog', function (isVisible) {
      console.log('Setting ShowLoginDialog isVisible=' + isVisible + '. isLoginDialogVisible=' + this.isLoginDialogVisible)
      if (isVisible) {
        this.isLoginDialogVisible = true
      } else {
        this.isLoginDialogVisible = false
      }
      console.log('Finished setting isLoginDialogVisible=' + this.isLoginDialogVisible)
    })
  },
  destroyed () {
    EventBus.$off('ShowLoginDialog')
  }
}
</script>

在检查控制台时，单击登录按钮时将打印以下内容：

Setting ShowLoginDialog isVisible=true. isLoginDialogVisible=undefined
Finished setting isLoginDialogVisible=true

为isLoginDialogVisible记录的值不能来自数据函数中定义的变量，因为它打印时未定义，而已被定义为false（我想这是我的主要问题）。

我已经阅读了很多有关该主题的文章，例如：

我基于实现的模式对话框示例来自此处：https://alligator.io/vuejs/vue-modal-component/

Answer 1

我认为App必须可以访问EventBus事件的侦听器。现在，EventBus和App是两个单独的实例。您可以像这样在App内安装事件处理程序：

mounted () {
   EventBus.$on('ShowLoginDialog', function (isVisible) {
      ...
    });

Answer 2

之所以发生这种情况，是因为您没有使用箭头功能。代替普通的函数，使用如下箭头函数：

mounted () {
    // Note the use of arrow function.
    EventBus.$on('ShowLoginDialog', (isVisible) => {
      // .. All your code
    })
}

如果您使用普通函数function () {}，则内部函数中将无法访问此指针。箭头函数会将this指针按词法绑定到 Mounted（）函数的this上下文。因此，请使用箭头功能，即() => {};

注意：如果您坚持使用普通的旧函数语法，请使用闭包变量来跟踪this指针：

mounted () {

    // Assign this pointer to some closure variable
    const vm = this;

    EventBus.$on('ShowLoginDialog', function (isVisible) {
      console.log('Setting ShowLoginDialog isVisible=' + isVisible + '. isLoginDialogVisible=' + vm.isLoginDialogVisible)
      if (isVisible) {
        vm.isLoginDialogVisible = true
      } else {
        vm.isLoginDialogVisible = false
      }
      console.log('Finished setting isLoginDialogVisible=' + vm.isLoginDialogVisible)
    })
}

这与Vue.js无关。这是一种典型的JavaScript行为。

在事件总线事件上打开模式对话框

2 个答案: