Javascript 如何在.addEventListener中访问Vue.prototype？

我正在尝试访问

Vue.prototype.$firebase

的全局对象，该对象在

main.js

import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import VueTailwind from "vue-tailwind";
import { FirebaseApp } from "@/firebase/firebase";
//Style
import "@/assets/styles/app.css";
import settings from "@/assets/styles/Tailwind.js";

FirebaseApp.auth().onAuthStateChanged((user)=>{
  Vue.prototype.$user = user;
})

//Vue
Vue.config.productionTip = false;
Vue.use(VueTailwind, settings);
Vue.prototype.$firebase = FirebaseApp;

new Vue({
  router,
  render: h => h(App)
}).$mount("#app");

登录

组件内部

<script>
export default {
  name: "Login",
  mounted: function () {
    this.submit();
  },
  methods: {
    submit() {
      let login = document.getElementById("login");     
      login.addEventListener(
        "submit",
        function (event) {
          event.preventDefault();
          const email = login.email.value;
          const password = login.password.value;
          this.$firebase
            .auth()
            .signInWithEmailAndPassword(email, password)
            .then((user) => {
              console.log(user)
              this.$router.replace('/')
            })
            .catch((error) => {
              console.log(error);
            });
        },
        true
      );
    },
  },
};
</script>

访问

Vue.prototype.$firebase

的正确方法是什么？为什么它有这样的范围限制？

避免在组件回调中使用

函数（）

，而是使用

函数

创建自己的

此

上下文，这样

此

将不再引用组件，但箭头函数使用周围的

此

上下文：

login.addEventListener(
“提交”，
（事件）=>{//更改为箭头函数
…//现在您可以访问'this.$firebase'`
},
真的
);

<script>
export default {
  name: "Login",
  mounted: function () {
    this.submit();
  },
  methods: {
    submit() {
      let login = document.getElementById("login");
      let signIn = this.$FirebaseApp;
      let onLogin = this.$router;
      login.addEventListener(
        "submit",
        function (event) {
          event.preventDefault();
          const email = login.email.value;
          const password = login.password.value;
          signIn
            .auth()
            .signInWithEmailAndPassword(email, password)
            .then((user) => {
              console.log(user)
              onLogin.replace('/')
            })
            .catch((error) => {
              console.log(error);
            });
        },
        true
      );
    },
  },
};
</script>