如何在插件中访问 Vue $refs？

Question

methods: {  
  async create () {
    this.disableSubmit = true;
    await this.$firestore
      .collection('collectionName')
      .add(this.item)
      .then(() => {
        this.$refs.createForm.reset();
        this.$notify('positive', 'Item successfully created!');
      })
      .catch(error => {
        this.$notify('negative', 'ERROR! Try again later!', error);
      });
    this.disableSubmit = false;
  },
}

如果我在方法属性中使用上面的代码，那么一切正常，但我想从 Vue 组件外部访问该引用，例如插件，但它给我一个错误.

TypeError: "_this.$refs is undefined"

即使我只是将它作为函数导入，错误也是一样的，所以我想知道如何访问外部引用 vue?

下面是我的插件的代码，还要说明一下，我用的是quasar框架

export let plugin = {
  install (Vue, options) {
    Vue.prototype.$plugin = async (collection, item) => {
      return await firestore
        .collection(collection)
        .add(item)
        .then(() => {
          this.$refs.createFrom.reset();
          notify('positive', 'Booking successfully created!');
        })
        .catch(error => {
          notify('negative', 'ERROR creating booking! Try again later!', error);
        });
    };
  }
};

我希望我的问题有道理，并在此先感谢您的帮助

Answer 1

您可以传递组件的上下文，以应用插件中的重置表单：

// plugin declaration
Vue.prototype.$plugin = async (collection, item, ctx) {
...
ctx.$refs.createFrom.reset()
...
}

然后当你从你的组件调用你的插件时可以这样做：

// your component
methods: {
  myFunction () {
    this.$plugin(collection, item, this)
  }
}

this 是将在插件中使用的当前组件上下文的引用

例如：

Vue.component('my-form', {
  methods: {
    resetForm() {
      console.log('the form has been reset')
    }
  }
})

Vue.prototype.$plugin = (item, ctx) => {
  console.log('item passed:', item)
  ctx.$refs.refToMyForm.resetForm()
}

new Vue({
  el: '#app',
  data: {
    item: 'foo'
  },  
  methods: {
    submit() {
      this.$plugin(this.item, this)
    }
  }
})

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<div id="app">
  <my-form ref="refToMyForm"></my-form>
  <button @click="submit">submit</button>
</div>

如何在插件中访问 Vue $refs？

How to access Vue $refs in a plugin?

vue.js

quasar