通过调用Local Method响应Vue.js事件总线时丢失上下文
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了通过调用Local Method响应Vue.js事件总线时丢失上下文相关的知识,希望对你有一定的参考价值。
我在捕获事件然后调用本地方法的语法方面遇到了麻烦。我尝试使用箭头语法,绑定到'this',并将'self'设置为'this',但无论我做什么,我都无法从事件中调用this.notify(...)。我收到错误“this.notify不是一个函数。”这无疑意味着我无法跨越某些背景?
在我尝试从事件中调用它时,通知功能在各种条件下都可以正常工作。
这里没什么了不起的。 app.js加载总线(事件总线),vuex / store和Notifications,然后app.vue。
所以我通过商店发送事件,在这种情况下必须得到一个不相关的组件来调用商店中的变异,然后商店在另一个显示通知的不相关组件中运行一个函数。帮助赞赏。 -谢谢。
App.js
(...)
import Notifications from 'vue-notification';
import velocity from 'velocity-animate';
Vue.use(Notifications, { velocity });
import app from "./app.vue";
const app = new Vue({
el: '#app',
store,
Notifications,
app,
render: h => h(app)
});
(...)
组件A - 工作得很好。
(...)
<b-btn v-on:click="$parent.showPokeNotice('display this nonsense text')"> My Arbitrary Text </b-btn>
(...)
组件B - 但是当我使用事件路由到Store(Vuex)时,上下文不一样。因此$ notify()和this.notify()不可用。
<template>
(...)
<notifications
group="workspace"
position="top center"
width="40%">
</notifications>
(...)
</template>
(...)
mounted: function() {
(...)
/* Register Listeners for the Notification alerts */
var self = this;
Bus.$on('showPokeNotice', function (noticeText) {
self.showPokeNotice(noticeText);
});
},
(...)
methods: {
(...)
showPokeNotice : function (noticeText) {
this.notify({... params ...}); <---THIS IS THE PROBLEM CONTEXT
}
(...)
}
因此,this.notify /($ notify)位于组件B中的Notifications组件中,但不能从事件中获得。
错误:
[Vue warn]: Error in event handler for "showPokeNotice": "TypeError: Cannot read property 'showPokeNotice' of undefined"
(found in <Root>)
TypeError: Cannot read property 'showPokeNotice' of undefined ...
谢谢。
答案
回答
因此,在组件的上下文中,我们使用
this.notify({...
但是,在回应事件时,我们使用:
this.$notify({...
因此,当使用事件调用全局变量时,显然存在一些范围(上下文)丢失。
我希望这能为别人提供价值.....
以上是关于通过调用Local Method响应Vue.js事件总线时丢失上下文的主要内容,如果未能解决你的问题,请参考以下文章