유형 스크립트가 있는 vuejs에서 여러 구성 요소를 가져올 수 없음

유형 스크립트가 있는 vuejs에서 여러 구성 요소를 가져올 수 없음

다음과 같이 다른 컴포넌트에 모두 사용하고 싶은 컴포넌트가 2개 있습니다.

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>

DDGDriver 성분

<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>

OverLay 컴포넌트

<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>

추가하는 것을 잊으셨습니다.@Component({})사용할 수 있습니다.

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

언급URL : https://stackoverflow.com/questions/53933126/unable-to-import-multiple-component-in-vuejs-with-typescript