如何在vue中将不同值的数组作为道具传递

Posted 2023-02-23

【中文标题】如何在vue中将不同值的数组作为道具传递

【英文标题】：how to pass array of different values as props in vue

【发布时间】：2021-10-20 11:32:43

【问题描述】：

我希望每个人都做得很好。我是 vue.js 的新手，正在学习非常有趣的道具。问题是我想将一个数组作为道具传递并希望在子组件中显示它。这是我的代码 父组件

    <template>
  <div id="app">
    <showProduct :product="['products']"/>  
</div>
</template>

<script>
import showProduct from './components/showProduct.vue'

export default 
  name: 'App',
  components: 
    showProduct
  ,
  data()
    return
        products:[
          productid:"01",productname:"t shirt",price:"50$",description:"a good description",
          productid:"02",productname:"jeans pant",price:"150$",description:"a good description of jeans",
          productid:"02",productname:"leather jacker",price:"250$",description:"a good description of jacket",
        ],

  

</script>

子组件代码如下所示

    <template>
   <h1>product</h1>
</template>

<script>
export default 
  name:'showProduct', 
  props:[
   'product'
  ],
  methods:
  

</script>

现在我想做以下事情：

仅将单个元素（例如产品 ID）作为“道具”传递。 传递整个产品数组并将其显示在子组件中。

欢迎任何提示和建议。

【参考方案1】：

这样你会在子组件中收到名称数组，以及当前项的索引，这样你就可以在子组件中获取该项的名称。

别忘了在你使用 v-for 指令的地方添加唯一键。

这样你会在子组件中收到名称数组，以及当前项的索引，这样你就可以在子组件中获取该项的名称。

别忘了在你使用 v-for 指令的地方添加唯一键。

父.vue

<template>
  <div>
    <child
      v-for="(skill, index) in skills.length"
      :key="skill.name"
      :index="index"
      :names-array="skills.map(a => a.name)"
    />
  </div>
</template>

<script>
import Child from './Child'

export default 
  name: 'Parent',

  components: 
    Child
  ,

  data () 
    return 
      skills: [
        
          name: 'Frozen Yogurt',
          required: 1,
          vMode1: ''
        ,
        
          name: 'Ice cream sandwich',
          required: 3,
          vMode1: ''
        ,
        
          name: 'Eclair',
          required: 1,
          vMode1: ''
        
      ]
    
  

</script>

Child.vue

<template>
  <div>
    <div>Index:  index </div>
    <div>Names Array:  namesArray </div>
    <div>Name:  namesArray[index] </div>
  </div>
</template>

<script>
export default 
  name: "Child",
  props: ["names-array", "index"]
;
</script>

输出：

索引：0 名称数组：[“冷冻酸奶”，“冰淇淋三明治”， “Eclair”]名称：冷冻酸奶

索引：1 名称数组：[“冷冻酸奶”，“冰淇淋三明治”， “Eclair”]名称：冰淇淋三明治

索引：2 名称数组：[“冷冻酸奶”，“冰淇淋三明治”， “埃克莱尔”] 名称：埃克莱尔