如何将Vue组件"导入"到Vue组件中

Question

这可能是一个非常愚蠢的问题,但是,我无法找到答案.

所以,我正在构建一个Vue组件,并希望在我的组件内部访问vue-spinner的组件.我该怎么办？

以下是相关代码的片段:

app.js:

Vue.component('players', require('./components/TeamPlayersComponent.vue'));

import GridLoader from 'vue-spinner/src/GridLoader.vue';

const app = new Vue({
    el: '#app',
    components: {
        GridLoader
    }
});

TeamPlayersComponent.vue:

<grid-loader></grid-loader>

假设已经安装了vue-spinner(NPM),TeamPlayersComponent.vue并且除了在控制台中提供此错误之外,它是有效且有效的:

vue.js?3de6:525 [Vue warn]: Unknown custom element: <grid-loader> - did you register the component correctly? For recursive components, make sure to provide the "name" option. (found in component <players> at /home/vagrant/code/rounds-smaa/resources/assets/js/components/TeamPlayersComponent.vue)

我正在和Laravel Elixir和Gulp一起使用Vue.

Answer 1

您可以通过以下方式获得:

var PulseLoader = require('vue-spinner/src/PulseLoader.vue');

并将其添加到组件中:

new Vue({
  components: {
    'PulseLoader': PulseLoader
  }
})

Answer 2

解:

用以下内容替换GridLoaderapp.js(Laravel设置)中的特定代码:

Vue.component('grid-loader', require('vue-spinner/src/GridLoader.vue'));

按预期工作!