web-dev-qa-db-ja.com

VueコンポーネントをVueコンポーネントに「インポート」する方法

これは本当にばかげた質問かもしれませんが、それでもなお、私は答えを見つけることができません。

だから、私は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 with Laravel Elixir and Gulp。

vue.jsvue-component
15
AshMenhennett

次の方法で入手できます。

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

コンポーネントに追加します：

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

解決：

App.jsのGridLoader固有のコード（Laravelセットアップ）を次のコードに置き換えます。

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

期待通りに働きました！

5
AshMenhennett

TeamPlayersComponent.vueファイルにローカルでコンポーネントを登録する必要があると思います。コンポーネントをインポートし、ファイルに登録します。

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

次に、コンポーネントをローカルに登録します。

    components: {
                gridLoader
               }
3
Eko Edita

次のようにインポートすることもできます。

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

次に、インポートするコンポーネントで：

components: { grid-loaderfrom }
1
Sumit Patel