如何将数据传递给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>