javascript - 如何正确全局注册和使用 Vue Rangedate Picker 组件？

Question

我正在尝试使用VueRangedatePicker，但我似乎无法弄清楚如何在其他一些 vue 组件的模板上使用它。我正在使用 Webpack。我已经在我的 main.js 文件中注册了组件/插件，如下所示：

import Vue from 'vue'
import App from './App'
import router from './router'
import { store } from './store/store'
import firebase from './firebase-config'
import vuefire from 'vuefire'

//////////////// HERE 
import VueRangedatePicker from 'vue-rangedate-picker' // importing the plugin here
Vue.use(VueRangedatePicker) // using it
Vue.component('VueRangedatePicker', {  }) // creating the component globally (if I don't add this line the app complains the component is not registered
////////////////

Vue.config.productionTip = false
let app;
Vue.use(vuefire)

firebase.auth().onAuthStateChanged(function(user){
  if (!app) {
    /* eslint-disable no-new */
    app = new Vue({
      el: '#app',
      template: '<App/>',
      components: { App, VueRangedatePicker },
      router,
      store,
      VueRangedatePicker
    })
  }
})

然后在我的组件 component_A.vue 上，我再次以以下方式导入 VueRangedatePicker 插件：

<template>
  <div>
       <vue-rangedate-picker @selected="onDateSelected" i18n="EN" />
  </div>
</template>
<script>
import firebase,{ itemRef } from '../firebase-config';
import VueRangedatePicker from 'vue-rangedate-picker'

export default {
firebase() { 
    return {
    items: itemsRef,
    }
  },
  name: 'component_A',
  data () {
    return {

    }
  },
created() {  
  console.log(VueRangedatePicker);
},
methods: {
  onDateSelected: function (daterange) {
    this.selectedDate = daterange
  },
}
</script>

我知道插件/组件已注册，因为当我在控制台上记录 Vue Rangedate Picker 时，我可以看到该对象

但是我收到这样的错误消息

我已经在项目的 github 上阅读了完整的 readme.md 文件，但我仍然感到困惑。什么是 Vue_Daterange_picker？是插件吗？它是一个组件吗？它是一个允许我构建组件的插件吗？我很困惑。你能更好地为我澄清一下吗？我怎样才能使这项工作？

标签： javascriptvue.jswebpackvue-component

Answer 1

这是因为您使用空名称注册了组件。在 main.js 中：

Vue.component('DatePicker', VueRangedatePicker)

然后在您的组件中将组件用作：

<date-picker></date-picker>