如何在 Vue SFC 中使用外部模块？

Posted 2023-02-23

【中文标题】如何在 Vue SFC 中使用外部模块？

【英文标题】：How to use an external module inside a Vue SFC?

【发布时间】：2019-11-03 20:58:42

【问题描述】：

我是 Vue 的新手，我正在尝试构建一个使用 Typescript 和 vue-property-decorator 的应用程序。这是我第一次尝试在 SFC 中使用外部模块。我想使用v-calendar 创建一个日历组件并将其呈现在页面中（schedule.vue）。

我已经完成了yarn add，我正在尝试遵循docs 关于使用 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>

我已经检查了这些问题，但我仍然迷路：

How to use external vue npm components How to include external js inside vue component

【问题讨论】：

@ShubhamSharma 如何/在哪里注册？

如果你的意思是registration 和Vue.component(...) 一样，我的印象是我不需要这个，因为我正在使用single file components。

您是否在浏览器的控制台中遇到任何错误？

您需要使用 Vue.component('v-calendar',Calendar ) 全局注册它，或者如果在基于类的 SFC 的情况下，您正在导入 Calendar 命名导入，那么它应该用作 日历>。所以无论哪种方式它都会起作用。 SFC 可以使用全局注册的组件。 @Component( components: setupCalendar, 'v-calendar':Calendar ) 可以在基于类的 SFC 中完成。

你说得对，我应该一直在使用 。现在 Vue 似乎知道我在说什么了。谢谢！

【参考方案1】：

您需要使用Vue.component('v-calendar',Calendar ) 全局注册它，或者在基于类的SFC 的情况下，您正在导入Calendar 命名导入，那么它应该用作<calendar></calendar> @Component( components: setupCalendar, 'v-calendar':Calendar ) 也可以在基于类的 SFC 中使用，为某些导入的组件提供自定义标签名称。