无法使用 Typescript 在 vuejs 中导入多个组件

Question

我有两个组件我想在其他组件上使用它们，如下所示

import { Component, Vue } from 'vue-property-decorator'
import DDGDriver from '@/components/ddg-driver.vue'
import OverLay from '@/components/overlay.vue'

@Component({
  components: {
    'over-Lay':OverLay,  'DDGDriver':DDGDriver
  }
})
export default class DDGPage extends Vue {
  showModal = true;
  onModalClose(){
    this.showModal = false;
  }
}

但它不起作用，只有第二个导入的组件被放置而不是第一个，我不知道为什么会发生这种情况。

<template>
  <div>
     <over-Lay v-on:close="onModalClose()" v-if="showModal">
        <DDGDriver /> 
     </over-Lay>
  </div>
</template>

DDG驱动组件

<template>
    <div class="driver">
        <h1>this is ddg driver</h1>
    </div>
</template>

<script>
import Vue from 'vue';

export default class DDGDriver extends Vue   {
}
</script>

<style lang="less" scoped>
.driver{
    height:auto;
    width: 400px;
    background-color: #FFF;
}
</style>

叠加组件

<template>
    <div class="overlay">
        <div class="containt">
            <div @click="removeModal()" class="close">X</div>
             <slot>
    This will only be displayed if there is no content
    to be display.
  </slot>
        </div>
    </div>
</template>

<script>
import Vue from "vue";

export default class OverLay extends Vue {
  removeModal(){
    this.$emit('close');
  }
}
</script>

<style lang="less" scoped>
.overlay {
  position: fixed;
  bottom: 0px;
  right: 0px;
  left: 0px;
  top: 0px;
  background-color: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  .containt {
    min-width: 20px;
    height: auto;
    background-color: #fff;
    padding: 15px;
    .close {
      position: relative;
      top: -32px;
      right: -27px;
      float: right;
      height: 25px;
      width: 25px;
      background: #fff;
      border-radius: 50%;
    }
  }
}
</style>

Answer 1

您忘记在子组件中添加@Component({}) 。

<script>
  import Vue from 'vue';
  @Component({})
  export default class DDGDriver extends Vue {}
</script>