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

Posted 2023-02-23

【中文标题】如何将 Vue 组件“导入”到 Vue 组件中

【英文标题】：How to 'import' a Vue component into a Vue component

【发布时间】：2017-05-18 13:03:36

【问题描述】：

这可能是一个非常愚蠢的问题，但尽管如此，我还是找不到答案。

所以，我正在构建一个 Vue 组件，并希望在我的组件中访问 vue-spinner 的组件。我该怎么做？

这里是相关代码的 sn-ps：

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 一起使用。

【问题讨论】：

您是否尝试过documentation 中建议的任何方法。请分享您到目前为止所尝试的内容。

问题已更新，谢谢。

【参考方案1】：

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

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

然后在本地注册组件。

    components: 
                gridLoader
               

【参考方案2】：

您也可以按如下方式导入：

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

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

components:  grid-loaderfrom 

【参考方案3】：

解决方案：

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

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

按预期工作！

【参考方案4】：

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

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

并将其添加到组件中：

new Vue(
  components: 
    'PulseLoader': PulseLoader
  
)