如何将从父组件传递到子组件中的数组的prop ?

Question

我有3个组件。一个父组件和两个子组件。这两个子组件是兄弟组件。

父组件

<template>
<div class="wrapper">
<div class="main-content">
<Modal :popupTitle="popupTitle" @addLocation="addLocation($event)"/>

<BinInfo :newBinLocation="newBinLocation"/>
<button data-bs-toggle="modal" data-bs-target="#staticBackdrop">Add new bin</button>
</div>
</div>  
</template>
<script>

export default {
data(){
return{
popupTitle:"Add New Bin Location",
newBinLocation: '',
}
},
methods:{
addLocation(newBinLocation){
this.newBinLocation = newBinLocation
}
},
components:{
Navigation,
TopBtns,
BinInfo,
}
}
</script>

其中一个子组件是listing组件，我显示了一个来自数组

的清单清单组件

<template>
<div class="table-responsive">
<h2>Bins - Location</h2>
<h5 v-if="bins.length==0">There are no bin locations added</h5>
<table class="table table-striped" v-if="bins.length > 0">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Location</th>
<th scope="col" class="text-end">Action</th>
</tr>
</thead>
<tbody>
<tr v-for="(bin, index) in bins" :key="index">
<th scope="row">{{index + 1}}</th>
<td><input ref="inputField" type="text" :value="bin.binlocation" :disabled="bin.disabled" @change="editedLocation=$event.target.value"></td>
<td class="text-end">
<div class="action-btn">
<button @click="btnEdit(index)"><fa icon="edit" /> Edit</button>
<button @click="btnUpdate(index)"><fa icon="edit" /> Update</button>
<button @click="btnDelete(index)"><fa icon="trash" /> Delete</button>
</div>
</td>
</tr>
</tbody>
</table>
<div class="btn-area">
<router-link to="/bins">View More</router-link>
</div>
</div>
{{newBinLocation}}
</template>
<script>
export default {
data(){
return{
bins:[
{
binlocation: '11 Garden Block, New City',
disabled: true
},
{
binlocation: 'Ali Towers, Lahore',
disabled: true
},
{
binlocation: 'The Mall Road',
disabled: true
}
],
editedLocation: null,
}
},
props:['newBinLocation'],
methods:{
btnDelete(index){
this.bins.splice(index, 1)
},
btnEdit(index){
this.bins[index].disabled = !this.bins[index].disabled;
this.editedLocation = this.bins[index].binlocation
/*if(this.bins[index].disabled === false){
console.log(this.$refs.inputField)
}*/
},
btnUpdate(index){
this.bins[index].binlocation = this.editedLocation
this.bins[index].disabled = !this.bins[index].disabled
console.log(this.bins[index].binlocation)
},
btnAdd(){
let newLocation = {
binlocation: this.newBinLocation,
disabled: true
}
this.bins.push(newLocation)
}
},
}
</script>
<style scoped>
.table-responsive{
margin-bottom:25px;
}
h2{margin:0 0 15px;}
.action-btn button{
border:0;
background:#003594;
color:#fff;
margin-left:15px;
padding:3px 15px;
}
.action-btn button:hover{
background:#3490dc
}
input{
background-color:none;
border:0;
color:#000;
}
</style>

在第二个子组件中，我创建了一个模态，我用它来添加一个新的列表。

模态组件

<template>
<div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">{{popupTitle}}</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p><input type="text" v-model="addBinLocation"></p>
</div>
<div class="modal-footer">
<button @click="btnAdd" type="button" class="btn btn-primary">Add Location</button>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
props:['popupTitle'],
data(){
return{
addBinLocation: ''
}
},
methods:{
btnAdd(){
this.$emit('addLocation', this.addBinLocation)
}
}
}
</script>
<style>
</style>

我能够添加和接收值，但是我如何将新的prop添加到现有的数组中，以便将其添加到列表中。

Answer 1

有一种方法可以在Listing Component中添加具有计算属性的newBinLocation，但这不是最干净的方法。

通过在Listing Component中声明bins数组犯了一个架构错误。父组件应该是感知数据的组件。Listing Component只是在这里打印一个列表。

你应该从Parent Component传递数组作为道具。这样，Listing Component就可以很容易地重复使用。

一旦你完成了这些，就很容易向数组中添加新项了。

下面是一个例子

父组件

<template>
<div class="wrapper">
<div class="main-content">
<Modal :popupTitle="popupTitle" @addLocation="addLocation($event)"/>

<BinInfo :bins="bins"/> <-- You need to pass the array instead of newBinLocation -->
<button data-bs-toggle="modal" data-bs-target="#staticBackdrop">Add new bin</button>
</div>
</div>  
</template>
<script>

export default {
data() {
return {
popupTitle:"Add New Bin Location",
bins:[
{
binlocation: '11 Garden Block, New City',
disabled: true
},
{
binlocation: 'Ali Towers, Lahore',
disabled: true
},
{
binlocation: 'The Mall Road',
disabled: true
}
],
}
},
methods:{
addLocation(newBinLocation){
this.bins.push(newBinLocation) // You just have to push the new value
}
},
components:{
Navigation,
TopBtns,
BinInfo,
}
}
</script>