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