步骤一 新建页面
父组件 main.vue
子组件1 list1.vue
子组件2 list2.vue
步骤二 父传子 props
main.vue中
<template>
<div>
<listA :data_child_A='data_parent_A'></listA>
<listB></listB>
</div>
</template>
<script>
import listA from '../components/list1.vue'
import listB from '../components/list2.vue'
export default {
data(){
return{
data_parent_A:[
{
name:"a",
id:1
},
{
name:"b",
id:2
},
]
}
},
methods:{
},
components:{
listA,
listB,
}
}
</script>
<style>
</style>
list1中
<template>
<div>
<div>{{data_child_A}}</div>
</div>
</template>
<script>
export default {
props:{
data_child_A:Array
}
}
</script>
<style>
</style>
步骤三 子传父
main.vue中
<template>
<div>
<listA :data_child_A='data_parent_A'></listA>
<listB @add-child='add_parent_B'></listB>
</div>
</template>
<script>
import listA from '../components/list1.vue'
import listB from '../components/list2.vue'
export default {
data(){
return{
data_parent_A:[
{
name:"a",
id:1
},
{
name:"b",
id:2
},
]
}
},
methods:{
add_parent_B(val){
console.log(val)
this.data_parent_A.push(
val
)
}
},
components:{
listA,
listB,
}
}
</script>
<style>
</style>
list2中
<template>
<div>
<button @click='child'>添加</button>
</div>
</template>
<script>
export default {
data(){
return {
data_child_B:[
{
name:"c",
id:3
},
{
name:"d",
id:4
},
]
}
},
methods:{
child(){
this.$emit('add-child',this.data_child_B)
}
}
}
</script>
<style>
</style>
点击添加
成功