时间戳

首页 > 解决方案 > 如何在VueJS中将数据从视图传递到组件

vue.js - 如何在VueJS中将数据从视图传递到组件

问题描述

也许我不了解这里的一些基本原理，但是我已经阅读了文档并尝试了 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>

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

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

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

标签： vue.jsvuejs2

解决方案

您可以使用 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>

推荐阅读