如何將數據傳遞給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>