컴포넌트 props가 안될 때..

[이효준]

선생님 안녕하세요.

App.vue 에서 
html은 이렇게 하고
<Modal :원룸들="원룸들" :누른거="누른거" :모달창열렸니="모달창열렸니"/>


스크립트에서는 이렇게 하고

<script>

import data from './assets/oneroom.js';
import discount from './discount.vue';
import Modal from './modal.vue';

export default {
  name: 'App',
  data(){
    return{
      누른거 : 0,
      원룸들 : data,
      모달창열렸니 : false,
      신고수 : [0,0,0],
      네비게이션 : ['Home', 'Shop', 'About'],
      products : ['역삼동원룸', '천호동원룸', '마포구원룸'],
      price : [50, 60, 70],
      스타일 : 'color : blue',
    }
  },//데이터 보관함이 있어야됨
  methods : {
    increase(){
      this.신고수 += 1;
    }
  },
  components: {
    discount : discount,
    Modal : Modal,
  }
}
</script>

modal.vue 에서는 이렇게 했는데
<template>
  <div class="black-bg" v-if="모달창열렸니 == true">
    <div class="white-bg">
      
      <h4>{{원룸들[누른거].title}}</h4>
      <p>{{원룸들[누른거].content}}</p>
      <span>{{ 원룸들[누른거].price }}</span>
      <!-- <button @click="모달창열렸니 = false">닫기</button> -->
    </div>
  </div>
</template>
<script>
export default {
    name : 'Modal',
    props :{
        원룸들 : Array,
        누른거 : Number,
        모달창열렸니 : Boolean,
    }
}
</script>

 나오지 않고 에러메시지가 나옵니다..

[codingapple]

무슨에러입니까

[이효준]

ERROR
[eslint]  C:\Users\이효준\OneDrive\바탕 화면\뷰\pengvue\src\modal.vue  15:12 error Component name "Modal" should always be multi-word vue/multi-word-component-names
✖ 1 problem (1 error, 0 warnings)

이렇게 나옵니다..

[codingapple]

Modal.vue 작명시 2단어 이상으로 작명합시다

[이효준]

app.vue에 
<Modalpage :원룸들="원룸들" :누른거="누른거" :모달창열렸니="모달창열렸니"/>

import Modalpage from './modal.vue';

components: {
    discount : discount,
    Modalpage : Modalpage,
  }

modal.vue 에
<script>
export default {
    name : 'Modalpage',
    props :{
        원룸들 : Array,
        누른거 : Number,
        모달창열렸니 : Boolean,
    }
}
</script>

이렇게 수정했는데 나오지 않는것 같습니다ㅠㅠ;

[이효준]

아.. modal.vue 에서 컴포넌트 이름을 name : 'Modal-page', 이렇게 하니 나옵니다 감사합니다..(안나와서 울 뻔.. )

[글쓴이]

글