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;
  },
}

如果我在methods属性内使用上面的代码，则一切正常，但我想从Vue组件（例如插件）外部访问该引用，但这给我一个错误。

TypeError：“ _ this。$ refs未定义”

即使只是将其导入为函数，错误也是一样，所以我想知道如何在vue外部访问ref？

下面是我的插件的代码，我也想指出我正在使用类星体框架。

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？

1 个答案: