如何'import'一个Vue组件变成一个Vue组件

How to 'import' a Vue component into a Vue component

这可能是一个非常愚蠢的问题,但仍然是我找不到答案的问题。

因此,我正在构建一个 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 一起使用。

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

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

并将其添加到组件中:

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

解决方案:

将 app.js(Laravel 设置)中的 GridLoader 特定代码替换为:

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

按预期工作!

您还可以导入如下:

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

然后在要导入它的组件中:

components: { grid-loaderfrom }

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

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

然后在本地注册组件。

    components: {
                gridLoader
               }