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

【问题标题】：How to pass data to Vue JS components?如何将数据传递给 Vue JS 组件？
【发布时间】：2016-08-30 22:25:03
【问题描述】：

免责声明：在打开此问题之前，我已尝试阅读文档。

我有这个组件：

<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 官方文档映射到这种“风格”？

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

谢谢！

【问题讨论】：

尝试将props 添加到您的module.exports 对象中。我认为处理文件时会变成Vue.component。
您没有使用不同的编码风格，所有 .vue 文件都是组件。所以你正在创建组件。参考：vuejs.org/guide/application.html

标签： javascript webpack vue.js

【解决方案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>

【讨论】：