脚手架+父子组件之间的通信+实践

步骤一  新建页面

父组件 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>

 

点击添加 

 成功