Vue中如何将数组从App.vue通过Props传递给孙组件？

核心问题 #

1. 父子组件传值名称不匹配：App.vue中给Main组件绑定的prop是:computers="PCs"，但Main.vue声明的接收prop是PCs，两者名称不一致导致数据无法正常传递。
2. Form组件缺少数据提交逻辑：未实现通过$emit向App传递新PC对象的代码，无法完成新增数据的功能。

修正后的完整代码 #

App.vue #

修正prop绑定名称，添加接收Form组件事件的方法：

<template>
  <div class="app-container">
    <Form @add-pc="addNewPC"/>
    <Main :PCs="PCs"/>
  </div>
</template>

<script>
import Form from './components/Form.vue'
import Main from './components/Main.vue'
export default {
  name: 'App',
  components:{
    Form,Main,
  },
  data(){
      return{
        PCs:[
            {
                key:1,
                name:'office laptop',
                power:1
            },
            {
                key:2,
                name:'desktop',
                power:2
            },
            {
                key:3,
                name:'gaming desktop',
                power:3
            },
            {
                key:4,
                name:'workstation',
                power:4
            },
            {
                key:5,
                name:'mac studio',
                power:4
            },
        ]
      }
    },
    methods: {
      addNewPC(newPC) {
        newPC.key = this.PCs.length + 1;
        this.PCs.push(newPC);
      }
    }
}
</script>

<style scoped>
.app-container {
  display: flex;
}
</style>

Main.vue #

保持prop名称与App的绑定一致，正常遍历渲染Block：

<template>
    <div class="main-container">
        <Block 
          v-for="PC in PCs" 
          :key="PC.key" 
          :name="PC.name" 
          :power="PC.power"
        />
    </div>
</template>

<script>
import Block from './Block.vue'
export default {
    name: 'MainDiv',
    components:{
        Block,
    },
    props:['PCs'],
}
</script>

<style scoped>
.main-container {
  flex: 1;
  padding: 10px;
}
</style>

Block.vue #

现有代码已正确接收prop，无需修改：

<template>
    <div class="block">
        <p>Name: {{ name }}</p>
        <p>Power Rating: {{ power }}</p>
    </div>
</template>

<script>
export default {
    name: 'PCBlock',
    props:['name','power']
}
</script>

<style scoped>
.block {
  border: 1px solid #eee;
  padding: 10px;
  margin-bottom: 10px;
  border-radius: 4px;
}
</style>

Form.vue（补充实现） #

添加表单输入与提交逻辑，通过$emit传递数据：

<template>
    <div class="form-container">
        <h3>添加新PC</h3>
        <div>
            <label>名称：</label>
            <input v-model="newPC.name" type="text" placeholder="输入PC名称"/>
        </div>
        <div>
            <label>功率：</label>
            <input v-model.number="newPC.power" type="number" placeholder="输入功率"/>
        </div>
        <button @click="submitPC">添加</button>
    </div>
</template>

<script>
export default {
    name: 'PCForm',
    data() {
        return {
            newPC: {
                name: '',
                power: 0
            }
        }
    },
    methods: {
        submitPC() {
            if (this.newPC.name && this.newPC.power > 0) {
                this.$emit('add-pc', {...this.newPC});
                this.newPC = {name: '', power: 0};
            }
        }
    }
}
</script>

<style scoped>
.form-container {
  width: 200px;
  padding: 10px;
  border-right: 1px solid #eee;
}
.form-container div {
  margin-bottom: 10px;
}
input {
  width: 100%;
  padding: 4px;
  box-sizing: border-box;
}
button {
  width: 100%;
  padding: 6px;
  cursor: pointer;
}
</style>

关键说明 #

• 父→子（App→Main）：保证prop绑定名称与子组件声明的名称完全一致，这里统一为PCs。
• 子→孙（Main→Block）：当前通过拆分属性传递的方式没问题；如果PC对象属性较多，也可以直接传递整个对象，比如:pc="PC"，Block声明props:['pc']后用{{ pc.name }}访问，更灵活。
• 子→父（Form→App）：Form通过$emit触发自定义事件，App监听事件并完成数据添加，这是Vue中子向父传值的标准方式。

内容的提问来源于stack exchange，提问作者Hi there