如何將數據傳遞到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']] } 。 但是我希望將此作為參數傳遞，而不是像現在這樣在組件中靜態定義。

我已經閱讀了有關如何在此處完成操作的文檔。 但是他們的例子...

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中使用不同的“樣式”編碼（我從他們的樣板開始）？

如何將Vue JS官方文檔映射到這種“樣式”？

如何將該數組作為參數/屬性傳遞？

謝謝！

Answer 1

您的組件需要將要傳遞的數據聲明為“ props”

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