Как использовать внешний модуль внутри Vue SFC? - PullRequest
Новая
       11

Как использовать внешний модуль внутри Vue SFC?

0 голосов
/ 21 июня 2019

Я новичок в Vue и пытаюсь создать приложение, которое использует Typescript и vue-property-decorator.Это моя первая попытка использовать внешний модуль внутри SFC.Я хочу создать компонент календаря, используя v-calendar и отобразить его на странице (schedule.vue).

Я сделал yarn add, и я пытаюсь следоватьчто документы говорят об использовании v-calendar в качестве компонента.Но на данный момент, когда я пытаюсь отобразить страницу, ошибок компиляции нет, но вся страница становится пустой.Что здесь не так?Любая помощь очень ценится! 

// pages/schedule.vue
<template lang="pug">
  VCalendar
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import VCalendar from '../components/calendar.vue';

@Component({
  components: {
    VCalendar
  }
})

export default class Schedule extends Vue {
}

// components/calendar.vue
<template lang="pug">
  <v-calendar :attributes="attrs" />
</template>

<script lang="ts">
import 'v-calendar/lib/v-calendar.min.css';
import { Calendar, setupCalendar } from 'v-calendar';
import { Component, Vue } from 'vue-property-decorator';

@Component({
  components: {
    setupCalendar,
    Calendar
  }
})

export default class VCalendar extends Vue {
  data() {
    return {
      attrs: [
        {
          key: 'today',
          highlight: {
            backgroundColor: '#ff8080',
          },
          dates: new Date(2018, 0, 1)
        }
      ],
    };
  }

  mounted():any {
    setupCalendar({
      firstDayOfWeek: 2,
    });
  }
}
</script>

Я проверил эти вопросы, но все еще потерялся:

1 Ответ

0 голосов
/ 24 июня 2019

Вам необходимо зарегистрировать его глобально, используя Vue.component('v-calendar',Calendar ), или в случае SFC на основе классов вы импортируете Calendar с именованным импортом, тогда его следует использовать, так как <calendar></calendar> @Component({ components: { setupCalendar, 'v-calendar':Calendar } }) также можно использовать в SFC на основе классов для обеспеченияпроизвольное имя тега для какого-либо импортированного компонента.

...