事件总线2？

Question

老师，下午好，请教一个问题？
我试着不用事件总线来实现本节所说的功能：点击播放小节视频时，如果需要登录，则直接弹出登录窗口.

为此，我在 detail.vue中，新增了以下代码

<template>
  <main>
    ...
    <the-login ref="loginComponent"></the-login>
  </main>
</template>

<script>
  import Login from "../components/login"
  ...
  export default {
    name: 'detail',
    components: {Login, ModalPlayer},
    ...
    play(section) {
        let _this = this;
        if (section.charge === _this.SECTION_CHARGE.CHARGE.key) {
          let loginMember = Tool.getLoginMember();
          if (Tool.isEmpty(loginMember)) {
            Toast.warning("请先登录"); // 改动处：这句改为_this.$refs.loginComponent.openLoginModal();
            return;
          } else { // 表示已经登录
            if (Tool.isEmpty(_this.memberCourse)) {
              Toast.warning("请先报名");
              return;
            }
          }
        }
        _this.$refs.modalPlayer.playVod(section.vod);
      }

结果，报以下错误。

[Vue warn]: Error in v-on handler: "TypeError: _this.$refs.loginComponent.openLoginModal is not a function"

found in

---> <Detail> at src/views/detail.vue
       <App> at src/app.vue
         <Root>
warn @ vue.runtime.esm.js?2b0e:619
logError @ vue.runtime.esm.js?2b0e:1884
globalHandleError @ vue.runtime.esm.js?2b0e:1879
handleError @ vue.runtime.esm.js?2b0e:1839
invokeWithErrorHandling @ vue.runtime.esm.js?2b0e:1862
invoker @ vue.runtime.esm.js?2b0e:2179
original._wrapper @ vue.runtime.esm.js?2b0e:6917
vue.runtime.esm.js?2b0e:1888 TypeError: _this.$refs.loginComponent.openLoginModal is not a function
    at VueComponent.play (detail.vue?3fbf:172)
    at click (eval at ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"5683928c-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js?!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/views/detail.vue?vue&type=template&id=68b3be6b& (app.js:1166), <anonymous>:180:58)
    at invokeWithErrorHandling (vue.runtime.esm.js?2b0e:1854)
    at HTMLDivElement.invoker (vue.runtime.esm.js?2b0e:2179)
    at HTMLDivElement.original._wrapper (vue.runtime.esm.js?2b0e:6917)

为什么会报这个错误呢？ login.vue中 openLoginModal() 的确是一个函数啊？
谢谢老师解答！！！

Answer 1

甲蛙 2020-11-04 10:08:20

你这种设计不太好，你的页面就会有两个loginComponent，header有一个，这个组件又有一个，有可能有冲突。并且，如果以后有很多功能，都可弹出登录窗口，难道每个都去引用一次loginComponent吗？用事件总线的好处，就是不管在哪个组件里，不管有多少个功能需要登录，只要在各个功能里解发一下登录事件就可以了

• 提问者 慕神4535282 #1

  非常感谢！