Vue JS 구성 요소에 데이터를 전달하는 방법은 무엇입니까?

Question

면책 조항 :이 질문을 열기 전에 문서를 읽으려고했습니다.

<template> 
    <accordion id="facilities-menu" :one-at-atime="true"> 
    <template v-for="facilities in facilitiesGroups"> 
     <panel class="accordion-toggle" :header="`Facilities #${$index+1}`" :is-open="$index === 0"> 
     <ul> 
      <li v-for="facility in facilities"> 
      {{facility}} 
      </li> 
     </ul> 
     </panel> 
    </template> 
    </accordion> 
</template> 

<style lang="scss" scoped> 
    @import "../../../styles/theme-colors.scss"; 

    .panel { 
    background: #5E6466; 
    border: none; 
    } 
</style> 

<script> 
    import { accordion, panel } from 'vue-strap' 

    module.exports = { 
    components: { 
     accordion, panel 
    }, 
    data() { 
     return { 
     'facilitiesGroups': [['Continente Alfragide', 'Jumbo Almada', 'Portugália'], ['Pingo Doce', 'Lidl', 'Allegro'], ['Casa']] 
     } 
    } 
    } 
</script> 

그리고 나는이 같은이 구성 요소의 인스턴스 : 그러나

<template> 
    <div class="user"> 
    <user></user> 
    </div> 
    <facilities></facilities> 
</template> 

<style lang="scss" scoped> 
    @import "../../../styles/theme-colors"; 

    .user { 
    width: 100%; 
    height: auto; 
    margin-top: 8%; 
    margin-bottom: 5%; 
    } 
</style> 

<script> 
    import User from './userProfile' 
    import Facilities from './groupedFacilities' 

    module.exports = { 
    components: { 
     'user': User, 
     'facilities': Facilities 
    } 
    } 
</script> 

, 당신은 내가 { 'facilitiesGroups': [['Continente Alfragide', 'Jumbo Almada', 'Portugália'], ['Pingo Doce', 'Lidl', 'Allegro'], ['Casa']] }을 할 데이터를 정의하고 첫 번째 구성 요소에서 것을 볼 수 있습니다

나는이 구성 요소가 . 그러나 나는 이것이 현재와 같이 구성 요소에 정적으로 정의되지 않도록 인수로 전달되기를 원합니다.

나는 이것을 어떻게 할 수 있는지에 관한 문서를 읽었습니다. here. 그러나 그들의 예 ...

Vue.component('child', { 
    // declare the props 
    props: ['msg'], 
    // the prop can be used inside templates, and will also 
    // be set as `this.msg` 
    template: '<span>{{ msg }}</span>' 
}) 

... 내 코드에있는 것과 아무 것도 같지 않습니다 ... 어디서나 Vue.component()도 사용하지 않습니다!

어떻게 Vue JS (나는 their boilerplate에서 시작)와 다른 "스타일"코딩을 사용하고 있습니까?

어떻게이 "스타일"에 Vue JS 공식 문서를 매핑 할 수 있습니까?

어떻게 그 배열을 인수/속성으로 전달할 수 있습니까?

감사합니다.

Answer 1

구성 요소는 '소품'이

<script> 
    import { accordion, panel } from 'vue-strap' 

    module.exports = { 
    components: { 
     accordion, panel 
    }, 
    props: ['facilitiesGroups'] 
    } 
</script> 

... 다음 상위 구성 요소 템플릿에 당신이 속성으로 데이터를 전달로 전달하고자하는 데이터를 선언 할 필요가있다.

<template> 
    <div class="user"> 
    <user></user> 
    </div> 
    <facilities :facilities-groups="facilitiesGroups"></facilities> 
</template>