Не удается зарегистрировать пользовательский компонент глобально с помощью vue.js

#vue.js

Вопрос:

Я создал компонент selectbox и хочу повторно использовать его в других компонентах. Si Я хочу зарегистрировать этот компонент глобально. Я импортировал этот компонент в main.js но не работает.

main.js

 import Selectbox from "@/modules/Selectbox.vue";
Vue.component("Selectbox", Selectbox);

Selectbox.vue

 <template>
  <div>
    <label>{{ label }}</label>
    <select @change="$emit('input', $event.target.value)">
      <option
        v-for="opt in options"
        :key="opt.value"
        :value="opt.value"
        :selected="value === opt.value"
      >
        {{ errorMessage }}
        {{ opt.label || "No label" }}
      </option>
    </select>
  </div>
</template>
<script>
export default {
  props: {
    label: {
      type: String,
      required: true
    },
  },
  data() {
    return {
      errorMessage: "",
      option: "lorem",
      options: [
        { label: "lorem", value: "lorem" },
        { label: "ipsum", value: "ipsum" }
      ]
    };
  },
};
</script>

Test.vue

 <template>
<div>
<Selectbox v-model="ward_no"/>
</div>
</template>
<script>
export default {
  data() {
   return {
     ward_no: '',
        };
     }
   }
</script>

1. Какую ошибку вы получили? Пожалуйста, добавьте к своему вопросу

2. Я не получил никакой ошибки. @Anatoly

3. Итак, что вы подразумеваете под «не работает» тогда? В консоли нет ошибок, а компонент просто не отображается?

4. Когда я не импортировал компонент Selectbox локально в другие компоненты, я получил «Неперехваченную ошибку ссылки: Selectbox не определен» @Anatoly

5. Можете ли вы добавить пример использования Selectbox в другом компоненте в своем сообщении?

Ответ №1:

Нет ничего плохого в том, что вы пытаетесь зарегистрировать глобальный компонент, но у вас отсутствует script тег.

ОБНОВЛЕНИЕ: Поговорив с @prabinasht по skype и просмотрев ее код, я увидел, что в нескольких файлах она забыла удалить локально импортированный / зарегистрированный компонент, и в то же время компонент тоже был зарегистрирован глобально, так что в этом и заключалась проблема.

Ответ №2:

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

 Vue.component('Selectbox', require('@/modules/Selectbox.vue').default)