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（）！

为什么我要使用不同的＆＃34;风格＆＃34;使用Vue JS进行编码（我是从their boilerplate开始的）？

如何将Vue JS官方文档映射到＃34; style＆＃34;？

如何将该数组作为参数/属性传递？

谢谢！

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>

如何将数据传递给Vue JS组件？

1 个答案: