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

Question

每个人我希望每个人都做得很好。我是 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 作为 'props'。
传递整个产品数组并将其显示在子组件中。

欢迎任何提示和建议。

Answer 1

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

另外不要忘记在使用 v-for 指令的地方添加唯一键。

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

另外不要忘记在使用 v-for 指令的地方添加唯一键。

Parent.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>

输出：

Index: 0 Names Array: [ "Frozen Yogurt", "Ice cream sandwich", "Eclair" ] Name: Frozen Yogurt

Index: 1 Names Array: [ "Frozen Yogurt", "Ice cream sandwich", "Eclair" ] Name: Ice cream sandwich

Index: 2 Names Array: [ "Frozen Yogurt", "Ice cream sandwich", "Eclair" ] Name: Eclair

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

how to pass array of different values as props in vue

arrays

vue.js

vuejs2

vue-component

vue-props