Question

也许我在这里不了解一些基本原理，但是我已经阅读文档并尝试了2个小时的不同方法，我对此一无所知。

因此，我有一个VueJS应用程序，在数据中有一个名为pattern的数组。看起来像这样：

[3, 4, 2, 6, 1, 8, 7, 9, 5]

在我看来，我正在遍历此数组并显示每个元素的div：

<div v-for="(ball, key) in pattern">@{{ ball }}</div>

简单，对吧？

现在，我将使该div中的HTML更复杂。但是在我这样做之前，我想将其作为一个单独的组件（我可能会在网站上的其他地方重用它，因此这种方法似乎很有意义）。

因此，在主VueJS应用中，我注册了一个新组件：

Vue.component('rack', require('./components/Rack.vue').default);

我创建的Rack.vue具有以下内容：

<template>
    <div>
        <!-- show ball number here -->
    </div>
</template>

<script>
    export default {
        mounted() {

        }
    }
</script>

然后我尝试在for循环内的HTML中添加一个<rack></rack>元素。

但是现在我不知道如何将ball数据传递到每个组件。我应该在页面上显示9个rack组件（pattern数组的每个成员1个）。

我尝试将v-model添加到<rack>元素中，但这引起了警告。我也尝试过类似:ball属性的操作，但这引发了错误。我认为我应该以某种方式使用props，但是在语法和Vue 1与Vue 2在这方面的差异（我使用的是2.6.10）使我感到困惑。

Answer 1

您可以pass data to a component using props。

<template>
  <div>@{{ ball }}</div>
</template>

<script>
export default {
  props: ['ball']
}
</script>

然后您将在视图中使用组件，如下所示：

<template>
  <div v-for="(ball, key) in pattern" :key="key">
    <Rack :ball="ball" />
  </div>
</template>

<script>
export default {
  components: {
    Rack: () => import('./components/Rack.vue'),
  },
  data: () => ({
    pattern: [3, 4, 2, 6, 1, 8, 7, 9, 5]
  })
}
</script>

Answer 2

您只需要在rack组件上定义一个prop，然后将值传递给它 documentation

Vue.component('rack', {
  props: ['ball'],
  template: '<div>{{ball}}</div>'
})

new Vue({
  el: "#app",
  data() {
    return {
      pattern: [3, 4, 2, 6, 1, 8, 7, 9, 5]
    }
  },
  methods: {}
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div v-for="(ball, key) in pattern">
    <rack :ball="ball"></rack>
  </div>
</div>

如何将数据从视图传递到VueJS中的组件

2 个答案: