代码之家  ›  专栏  ›  技术社区  ›  Syed

如何从另一个函数访问全局函数(vue.prototype.myfn)?

  •  0
  • Syed  · 技术社区  · 6 年前

    我在一个nuxt.js项目中,正在尝试创建全局函数,出现以下错误:

    Cannot read property '$toggleBodyClass' of undefined
    

    这是我的代码(plugins/globals.js):

    import Vue from 'vue';
    
    Vue.prototype.$toggleBodyClass = (addRemoveClass, className) => {
      const elBody = document.body;
    
      if (addRemoveClass === 'addClass') {
        elBody.classList.add(className);
      } else {
        elBody.classList.remove(className);
      }
    };
    
    Vue.prototype.$setMmodalBackdrop = () => {
      this.$toggleBodyClass('addClass', 'modal-open'); // ** How to make this work? **
    };
    

    当我在组件(components/mycomp.vue)中使用它时,它工作得很好:

    <template>
      <div>
        <button @click="handelClick">Toggle Class</button>
      </div>
    </template>
    
    <script>
    export default {
      methods: {
        handleClick() {
          this.$toggleBodyClass('addClass', 'modal-open');
        },
      },
    };
    </script>
    

    请帮忙,谢谢。

    2 回复  |  直到 6 年前
        1
  •  1
  •   Sami Hult    6 年前

    只需更改您的代码

    this.$toggleBodyClass
    

    Vue.prototype.$toggleBodyClass
    
        2
  •  1
  •   Aldarund    6 年前

    在nuxt中,还可以使用inject函数使其可以从上下文、Vuex存储区等进行访问。 inject

    export default ({ app }, inject) => {
      inject('myInjectedFunction', (string) => console.log('That was easy!', string))
    }