如何注册自定义Vue组件？

Question

我保证我已经阅读了我能找到的每一篇相关的文章，但我得到了任何清晰的答案(据我所知，但我对Vue并不陌生)。

详细信息：

• 我用的是Vue v2.5.15
• 我们正在使用webpack (我已经读过，这可能会影响我如何使用组件)

我正在尝试使用这个量程滑块部件。我试图跟踪这些文档，但是我一直得到一个错误，说明了[Vue warn]: Unknown custom element: <vue-slider> - did you register the component correctly?。我已经试着阅读了这些文档，大概有20个不同的帖子，但我仍然没有得到这些。下面是我的JS文件中的基本内容：

<!-- HTML -->
<div id="app">
  <vue-slider
        v-model="sliderRange"
        :min="minPriceBase"
        :max="maxPriceBase"
  ></vue-slider>
</div>

// Javascript
import Vue from 'vue';
import VueSlider from 'vue-slider-component';
import 'vue-slider-component/theme/default.css';

export default {
  components: {
    VueSlider
  }
}

Vue.component('VueSlider', VueSlider);

var vm = new Vue({
  el: '#app',
  data: {},
  components: {
    VueSlider: window['vue-slider-component']
  }
});

我也读过组件的Vue文档，我不知道我做错了什么。如何正确注册组件？

更新：

我发现如果我用：

components: {
  VueSlider
}

而不是：

components: {
  VueSlider: window['vue-slider-component']
}

然后我就停止了上面提到的错误。相反，我得到一个错误，说明了[Vue warn]: Invalid prop: type check failed for prop "min". Expected Number, got Boolean。但你觉得这是进步吗？为什么‘窗口’‘vue滑块组件’是必要的？

Answer 1

查看文档，我认为您尝试同时执行所有不同的导入变体。

  new Vue({
    el: '#app',
    components: {
      VueSlider: window['vue-slider-component']
    }
  })

似乎是访问附加到窗口的组件的建议方法，如果通过脚本通过添加

<script src="./node_modules/vue-slider-component/dist/vue-slider-component.umd.min.js"></script>

(而你并没有这么做)

然后还有两种方法，您可以通过以下方法全局安装组件

// main.js
import VueSlider from 'vue-slider-component'
import 'vue-slider-component/theme/default.css'

Vue.component('VueSlider', VueSlider)

这将使vue滑块对应用程序中的所有组件都可用，因此您不必多次导入它。如果这样做，就不必在本地定义它。最后，第三个选项是只在本地导入它：

// App.vue
import VueSlider from 'vue-slider-component'
import 'vue-slider-component/theme/default.css'

export default {
  components: {
    VueSlider
  }
}

这将使滑块组件只对单个组件可用。在您的情况下，您可以决定选择选项1：

import VueSlider from 'vue-slider-component'
Vue.component('VueSlider', VueSlider);

或备选案文2：

import VueSlider from 'vue-slider-component'
import 'vue-slider-component/theme/default.css'

export default {
  components: {
    VueSlider
  }
}

顺便说一下，您现在看到的错误是，您所引用的minPriceBase不是一个数字，您必须在实例上设置该数据：

import VueSlider from 'vue-slider-component'
import 'vue-slider-component/theme/default.css'

export default {
  components: {
    VueSlider
  },
  data () {
    return {
      minPriceBase: 0,
      maxPricebase: 10
    }
  }
}

请注意，在您的代码中，您在vue实例之前粘贴了导出，您不需要在那里导出任何东西，只需在vue实例上定义该组件：

import VueSlider from 'vue-slider-component'

var vm = new Vue({
  el: '#app',
  data: {},
  components: {
    VueSlider
  }
});

您应该能够在您的示例中消除这个问题，它不会做任何事情：

export default {
  components: {
    VueSlider
  }
}

Answer 2

最近，也出现了同样的问题，还有500个服务器端呈现错误。

不管怎么说，我用了require来修正和使用它。

if (process.browser) { // I am not sure if it is needed for you.
  const VueSlider = require('vue-slider-component');
  Vue.component('VueSlider', VueSlider);
  Vue.use(require('vue-slider-component/theme/default.css'));
}
...

<vue-slider ...>
...
</vue-slider>