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

Posted 2023-02-23

【中文标题】如何在VueJS中将数据从视图传递到组件

【英文标题】：How to pass data from view to component in VueJS

【发布时间】：2020-03-16 07:10:09

【问题描述】：

也许我不明白这里的一些基本原理，但我已经阅读了文档并尝试了 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 属性的方法，但这引发了错误。我认为我应该以某种方式使用道具，但我对 Vue 1 和 Vue 2 在这方面的语法和差异感到困惑（我使用的是 2.6.10）。

【问题讨论】：

v-model 仅用于输入元素。

【参考方案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>

【参考方案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>

【讨论】：

我在几个地方发现了这种语法。困扰我的是，为什么我必须在那里定义 HTML（你的 sn-p 的第 3 行）？我不能从模板文件中导入它吗？

@jovan 是的，你可以，我只需要在那里这样做才能使其在 sn-p 中运行。

我已经尝试过了，但在控制台中出现错误，提示 invalid template option:[object Object]。奇怪的是，在 Vue devtools 选项卡中，我看到 ball 在组件内有一个值。