如何将一个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) 我正在使用Vue与Laravel Elixir和Gulp。

- AshMenhennett

---

你尝试过文档中推荐的方法吗？请分享一下你目前尝试过的内容。文档链接。 - Nora

问题已更新，谢谢。 - AshMenhennett

Answer 1

您可以通过以下步骤获得：

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

并将其添加到组件中：

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

- Saurabh

Answer 2

解决方案：

将 app.js（Laravel 设置）中的 GridLoader 特定代码替换为：

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

按预期工作！

- AshMenhennett

Answer 3

我认为你应该在TeamPlayersComponent.vue文件中本地注册组件。导入组件并在文件中进行注册。

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

然后在本地注册该组件。

    components: {
                gridLoader
               }

- Eko Edita

Answer 4

您可以按照以下方式导入：

import grid-loader from "vue-spinner/src/GridLoader.vue";

然后在你想要导入它的组件中：

components: { grid-loaderfrom }

- Sumit Patel