自我总结篇之vue的组件通信（父传子 子传父 非父子）

一：父传子

父组件代码如下：

<template>
    <div class="father">
   <child :message='message' :message2='message2'></child>
</div>
</template>
<script>
import child from '@/components/child.vue'
export default {
    components:{
     child
    },
    data(){
  return{
      message: '我是来自父组件的第一条message',
      message2:'我是来自父组件的第二条message'
  }
    }
}
</script>

子组件代码如下：

<template>
    <div class="child">{{message}}<br/>{{message2}}</div>
</template>
<script>
export default {
   props:['message','message2']
}
</script>

运行结果如下图：

二：子传父

子组件代码如下：

<template>
    <div class="child" >
    <button @click="sendMsgToParent">点击开始传值</button>

    </div>
</template>
<script>
export default {
   data(){
       return{
       }
   },
   methods:{
       sendMsgToParent(){
     this.$emit('listenMsg','我是来自子组件的message')
       }
   }
}
</script>

父组件代码如下：

<template>
    <div class="father">
        {{msg}}
   <child v-on:listenMsg="showMsg"></child>
</div>
</template>
<script>
import child from '@/components/child.vue'
export default {
    components:{
     child
    },
    data(){
  return{
      msg:'我是来自父组件的msg'
  }
    },
    methods:{
        showMsg(data){
           this.msg = data
        }
    }
}
</script>

运行结果如下：

 

点击按钮后，运行结果如下：

三：非父子

如果是非父子进行组件通信的话，我们首先要创建一个桥梁，通过这个桥梁使两个组件产生联系。

首先创建‘桥梁’-----bus.js，代码如下

import Vue from 'vue'
const bus = new Vue()
export default bus

然后组件A通过点击事件想将数据发送给组件B，代码如下

<template>
    <div class="hello">
        {{number}}<br/>
        <button @click="sendNumber()">发送</button>
        </div>
</template>
<script>
import bus from '../assets/js/bus.js'
export default {
   data(){
       return{
           number:'我是hello组件参数123'
       }
   },
   methods:{
       sendNumber(){
    bus.$emit('acceptNumber',this.number)
       }
   } 
}
</script>

组件B接受发送过来的数据，代码如下

<template>
    <div class="world">
        {{number}}
        </div>
</template>
<script>
import bus from '../assets/js/bus.js'
export default {
   data(){
       return{
           number:'我是world组件参数456'
       }
   },
   created(){
       bus.$on('acceptNumber',data =>{
           this.number = data
       })
   }
}
</script>

代码运行后，演示结果如下图

 

当点击发送按钮后，演示结果如下图

至此，非父子组件通信完成。