快速上手vue中的三种组件通信方式

“我报名参加金石计划1期挑战——瓜分10万奖池，这是我的第7篇文章，点击查看活动详情”

前言：对于每一个学习vue的人来说，掌握vue的组件通信是一大重要的基础，下面给大家用代码简单的示范一下vue中的三大组件通信方式。

1. 父组件向子组件通信

在父组件里面通过点击事件改变父组件数据源里的值，同时将这个值传给子组件 整个流程就是在父组件中引入子组件，然后父组件用v-bind绑定一个事件名将要传给子组件的数据写在绑定事件名的右边；子组件里用props属性来接收父组件传过来的数据。

// 父组件
<template>
  <div class="parent">
    <p>我是父组件向子组件传：{{count}}</p>
     <button @click="()=>{ count++ }">加一</button>
     <hr/>
     <childVue :valueToChild="count"></childVue>//v-bind绑定的属性名自己写，然后将要传给子组件的数据写在右边
  </div>
</template>
<script>
import childVue from './child.vue'  // 引入子组件
export default {
  components:{
    childVue
  },
  data(){
    return {
    count:0
    }
  }
}
</script>

// 子组件
<template>
  <div class="child">
    <p>我是子组件接收值：{{ valueToChild }}</p>
  </div>
</template>

<script>
export default {
  props:['valueToChild']   // 在这里面接收父组件传过来的数据
}
</script>

<style>

</style>

2.子向父传值

在子组件里面通过点击事件改变子组件数据源里的值，同时将这个值传给父组件

当然整个流程也就是先在父组件中引入子组件，在子组件里面添加一个点击事件用来触发向父组件传值的这一个行为，将本次传值行为命名并且将值发散出去。父组件则通过本次传值行为的事件名来接收子组件传过来的值，并且父组件用自己的方法来接收子组件发散出来的东西。

// 子组件
<template>
  <div class="child">
    <p>我是子组件向父组件传：{{count}}</p>  // 向父组件传count值
    <button @click="add">add</button>  // 添加一个点击事件用来触发向父组件传值的这一个行为
  </div>
</template>

<script>
import parentVue2 from '@/components/unit2/parent.vue'
export default {
  components:{
    parentVue2
  },
  data(){
    return{
        count:0
    }
  },
  methods:{
    add(){  
        this.count++  // 让数据源
        this.$emit('sentCount',this.count)  // 将事件名与携带的参数发散出去
    }
  }
}
</script>

<style>

</style>


// 父组件
<template>
  <div class="parent">
    <p>  我是父组件接收子组件传过来的：{{num}}</p>
    <br/>
     <childVue @sentCount="getCount"></childVue>//父组件在这里绑定子组件抛出来的的事件，然后用自己的方法来接收子组件发散出来的东西
  </div>

 
</template>

<script>
import childVue from './child.vue'
export default {
  components:{
    childVue
  },
  data(){
    return {
    num:0
    }
  },
  methods:{
    getCount(e){  // 这个方法里面会有个参数，代表子组件传过来的值
      console.log(e);
      this.num=e  // 将子组件传过来的值赋给父组件自己的数据源
    }
  }
}
</script>

<style>

</style>

3.兄弟组件之间通信

兄弟一节点通过事件公交车将值传给兄弟二节点

讲到兄弟组件通信，大概有两种方法；第一种就是兄弟一向父组件传值，然后父组件向兄弟二传值，这样兄弟一与兄弟二之间就达到了通信的目的。当然第二种方法就是使用事件公交车，这个方法就要用到$emit与$on；我们要知道$emit与$on是一对夫妻api，一个用来往外发散，一个用来接收；但是这对夫妻api必须是在同一个vue对象里面进行发散与接收。这里的例子是兄弟一向兄弟二通信，下面来看代码好理解一点。 注意： 上面我们说了 $emit 与$ on必须是在同一个vue对象里面进行发散与接收，但是兄弟一与兄弟二是两个不同的页面，也就是说这两兄弟不是同一个vue对象，所以

// 同理父组件要引用两个子组件，这里就不过多的描述

// 兄弟组件一
<template>
<div class="child1">
  <p>子组件1</p>
  <button @click="add">add</button>
  <p>{{ count }}</p>
</div>
</template>

<script>
import bus from '@/bus.js'  
export default {
    data(){
        return{
            count:0
        }
    },
    methods:{
        add(){
            this.count++
            // this.$emit('sentCount',this.count)
            bus.$emit('sendCount',this.count) // 向外抛出
            // $emit与$on是一对夫妻api，一个用来往外发散，一个用来接收；
            //但是这对夫妻api必须是在同一个对象里面进行发散与接收；而child1与child2并不是同一个vue实例对象，
            // 因此我们在外面的文件里面实例化一个新的vue对象bus,让这对夫妻api在同一个对象里面进行数据的发散与接收  这也叫事件公交车 
        }
    }
}
</script>

<style>
.child1{
    width: 400px;
    height: 400px;
    background-color: yellow;
}
</style>


// 兄弟二
<template>
<div class="child2">
  <p>子组件2</p>
  <p>{{num2}}</p>
  <p>{{num}}</p>
</div>
</template>

<script>
import bus from '@/bus.js'
export default {
    mounted(){
        bus.$on('sendCount',(e)=>{  // 用$on接收兄弟一抛出的东西，第一个参数是兄弟一抛出的事件名
        //第二个参数是一个回调函数，里面有一个参数，代表的是传过来的值 
            console.log(e);
            this.num=e
        })
    },
    data(){
        return {
            num:0
        }
    }
}
</script>

<style>
.child2{
    width: 400px;
    height: 400px;
    background-color: green;
}
</style>