如何将Vue组件“导入”到Vue组件中

时间:2017-01-04 09:34:08

标签: vue.js 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)

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

4 个答案:

答案 0 :(得分:12)

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

  convertView = mInflater.inflate(R.layout.addcompany_layout, null);

并将其添加到组件中:

        convertView = mInflater.inflate(R.layout.addcompany_layout,parent,false);

答案 1 :(得分:5)

解决方案:

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

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

按预期工作!

答案 2 :(得分:3)

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

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

然后在本地注册组件。

    components: {
                gridLoader
               }

答案 3 :(得分:1)

您还可以按如下方式导入:

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

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

components: { grid-loaderfrom }