如何通过组件使用数据

Question

我有两个组成部分，第一个是我用来显示项目列表的组件，第二部分是关于样式以及项目的显示方式。

项目存储在 app.vue 文件中的数组中

我的问题是，如何通过这两个组件使用数组。我如何在第二个组件中使用它来获取项目的元素并将它们放置在标题等位置。我如何循环遍历所有项目，以便在我显示它们的组件中显示它们。

Answer 1

这可以通过使用 for loop and component props

来实现

例如

在两个文件中：

父组件，例如FruitComponent.vue

<template>
    <fruit-list v-for:"fruitTitle in fruitsList" :title="fruitTitle"></fruit-list>
</template>
<script>
    export default{            
        data () {
            return {
                fruitsList: ["fruit1", "fruit2", "fruit3"]
        } 
    }
</script>

子组件，例如FruitItem.vue

<template>
    <h3>{{fruitsItem}}</h3>
</template>
<script>
    export default{            
        props: {fruitTitle : String}
    }
</script>

或者，如果您有一次性用例

（这只推荐用于超小组件，因为整个 HTML 你的子组件在创建组件时进入“模板”属性。创建一个新文件会使它更干净）

父组件包含

<div id="fruits-component">
  <ol>
    <fruits-list v-for="fruit in fruitsItems" :fruits-item="fruit"></fruits-list>
  </ol>
</div>

创建一个您尝试动态呈现的子组件

Vue.component('fruits-list', {
  props: ['fruitsItem'],
  template: '<h3>{{fruitsItem.name}}</h3>'
});

正在将组件注册为 fruits-component 的子组件

new Vue({
  el: '#fruits-component',
  data: {
    fruitsItems: [
      {name: 'first fruit'},
      {name: 'second fruit'}
    ]
  }
});

如何通过组件使用数据

How to use Data through components

javascript

arrays

vue.js

vuex

vuejs2

在两个文件中：

或者，如果您有一次性用例