事件总线2?

来源:16-7 Vue事件总线使用案例

慕神4535282

2020-11-03

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

为此,我在 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() 的确是一个函数啊?
谢谢老师解答!!!

写回答

1回答

甲蛙

2020-11-04

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

0
1
慕神4535282
非常感谢!
2020-11-04
共1条回复

Spring Cloud+ Vue前后端分离开发企业级在线视频系统

全网稀缺课程 市场热门项目+主流框架 一课掌握前后端技术

1743 学习 · 1698 问题

查看课程