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> 

として渡さたいデータを宣言する必要があります。以下は "facilitiesGroups"が親コンポーネントのデータ要素である例です：

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