Как 'импортировать' компонент Vue в компонент Vue

Это может быть действительно глупый вопрос, но, тем не менее, я не могу найти на него ответа.

Итак, я создаю компонент Vue и хочу получить доступ к компоненту vue-spinner ( s) внутри моего компонента. Как бы я это сделал?

Вот фрагменты рассматриваемого кода:

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.


vue.js vue-component
person AshMenhennett    schedule 04.01.2017    source источник
comment
Пробовали ли вы какой-либо из методов, предложенных в документации? Поделитесь, пожалуйста, тем, что вы пробовали до сих пор.   -  person Nora    schedule 04.01.2017
comment
Вопрос обновлен, спасибо.   -  person AshMenhennett    schedule 04.01.2017

Ответы (4)


arrow_upward
14
arrow_downward

Вы можете получить его следующим образом:

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

и добавляем его в компоненты:

new Vue({
  components: {
    'PulseLoader': PulseLoader
  }
})
person Saurabh    schedule 04.01.2017

arrow_upward
5
arrow_downward

Решение:

Замените конкретный код GridLoader в app.js (настройка Laravel) на:

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

Сработало как положено!

person AshMenhennett    schedule 04.01.2017

arrow_upward
3
arrow_downward

Я считаю, что вам следует зарегистрировать компонент локально в файле TeamPlayersComponent.vue. Импортируйте компонент и зарегистрируйте в файле.

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

Затем зарегистрируйте компонент локально.

    components: {
                gridLoader
               }
person Eko Edita    schedule 07.07.2018

arrow_upward
1
arrow_downward

Вы также можете импортировать следующее:

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

а затем в компоненте, в который вы хотите его импортировать:

components: { grid-loaderfrom }
person Sumit Patel    schedule 01.05.2018