vue组件间通信的方式

一、props / $emit

1.父组件给子组件传值

props

子组件给父组件传值

$emit()方法
this.$emit(“function”,param);
其中function为父组件定义函数，param为需要传递参数
子组件

changePage(page) {
      this.$emit("change", page);
    }

父组件

 <productTable :data="tableData" :page="page" @change="changePage" />


 changePage(page) {
      this.page = page;
      this.getTableData();
    }

父组件中的page是子组件中的传递的page

二、ref / refs

ref

如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；
如果用在子组件上，引用就指向组件实例，可以通过实例直接调用组件的方法或访问数据， 我们看一个ref 来访问组件的例子:

refs

在父页面拿到子页面form表单的数据

// 父组件 app.vue

<template>
  <component-a ref="comA"></component-a>
</template>
<script>
  export default {
    mounted () {
      const comA = this.$refs.comA;
      console.log(comA.name);  // Vue.js
      comA.sayHello();  // hello
    }
  }
</script>

三、$children / $parent

通过$parent和$children可以访问组件的实例，拿到实例代表可以访问此组件的所有方法和data
取到子组件中的值，子组件是一个数组

 this.$children[0].messageA 

取到父组件中的值，父组件是一个对象

this.$parent.msg;

要注意边界情况，如在#app上拿$parent得到的是new Vue()的实例，在这实例上再拿$parent得到的是undefined，而在最底层的子组件拿$children是个空数组。也要注意得到$parent和$children的值不一样，$children 的值是数组，而$parent是个对象。

四、provide/ inject

provide/ inject 是vue2.2.0新增的api，简单来说就是父组件中通过provide来提供变量后，然后在子组件中注入变量
注意: 这里不论子组件嵌套有多深, 只要调用了inject 那么就可以注入provide中的数据，而不局限于只能从当前父组件的props属性中回去数据
可以进行跨组件通信

// A.vue

<template>
  <div>
	<comB></comB>
  </div>
</template>

<script>
  import comB from '../components/test/comB.vue'
  export default {
    name: "A",
    provide: {
      for: "demo"
    },
    components:{
      comB
    }
  }
</script>

// B.vue
<template>
  <div>
    {{demo}}
    <comC></comC>
  </div>
</template>

<script>
  import comC from '../components/test/comC.vue'
  export default {
    name: "B",
    inject: ['for'],
    data() {
      return {
        demo: this.for
      }
    },
    components: {
      comC
    }
  }
</script>

// C.vue
<template>
  <div>
    {{demo}}
  </div>
</template>

<script>
  export default {
    name: "C",
    inject: ['for'],
    data() {
      return {
        demo: this.for
      }
    }
  }
</script>

五、$attrs与 $listeners

隔代组件如何进行通信
子组件中可以获取父组件定义的属性，会附着在子组件的根元素上
附着在根元素上的这种情况可以禁用，子组件可以通过配置inheriAttrs:false，禁止将attribute附着在子组件的根元素上，但不影响通过$attrs获取

 // 子组件中可以获取父组件定义的属性
// childCom1.vue
<template class="border">
  <div>
    <p>name: {{ name}}</p>
    <p>childCom1的$attrs: {{ $attrs }}</p>
    <child-com2 v-bind="$attrs"></child-com2>
  </div>
</template>
<script>
const childCom2 = () => import("./childCom2.vue");
export default {
  components: {
    childCom2
  },
  inheritAttrs: false, // 可以关闭自动挂载到组件根元素上的没有在props声明的属性
  props: {
    name: String // name作为props属性绑定
  },
  created() {
    console.log(this.$attrs);
     // { "age": "18", "gender": "女", "height": "158", "title": "yan" }
  }
};
</script>

// childCom2.vue
<template>
  <div class="border">
    <p>age: {{ age}}</p>
    <p>childCom2: {{ $attrs }}</p>
  </div>
</template>
<script>

export default {
  inheritAttrs: false,
  props: {
    age: String
  },
  created() {
    console.log(this.$attrs); 
    // { "gender": "女", "height": "158", "title": "程序员成长指北" }
  }
};
</script>

子组件可以通过$listeners获取父组件传递过来的所有事件处理函数

六、eventbus

EventBus 通过新建一个 Vue 事件bus对象，然后通过 bus.$emit 触发事件，bus.$on监听触发的事件。
组件通知事件总线发生了某件事，事件总线通知其他监听该事件的所有组件运行某个函数

1.初始化

首先需要创建一个事件总线并将其导出, 以便其他模块可以使用或者监听它.

// event-bus.js

import Vue from 'vue'
export const EventBus = new Vue()

2. 发送事件

假设你有两个组件: additionNum 和 showNum, 这两个组件可以是兄弟组件也可以是父子组件；这里我们以兄弟组件为例:

<template>
  <div>
    <show-num-com></show-num-com>
    <addition-num-com></addition-num-com>
  </div>
</template>

<script>
import showNumCom from './showNum.vue'
import additionNumCom from './additionNum.vue'
export default {
  components: { showNumCom, additionNumCom }
}
</script>

// addtionNum.vue 中发送事件

<template>
  <div>
    <button @click="additionHandle">+加法器</button>    
  </div>
</template>

<script>
import {EventBus} from './event-bus.js'
console.log(EventBus)
export default {
  data(){
    return{
      num:1
    }
  },

  methods:{
    additionHandle(){
      EventBus.$emit('addition', {
        num:this.num++
      })
    }
  }
}
</script>

3. 接收事件

// showNum.vue 中接收事件

<template>
  <div>计算和: {{count}}</div>
</template>

<script>
import { EventBus } from './event-bus.js'
export default {
  data() {
    return {
      count: 0
    }
  },

  mounted() {
    EventBus.$on('addition', param => {
      this.count = this.count + param.num;
    })
  }
}
</script>

总结：

• 父子组件通信：prop、event、style和class、attribute、native修饰符、$listeners、v-model、sync修饰符、$parent/$children
• 跨组件通信：provide/inject、eventbus、$attrs与 $listeners、router、vuex、store模式、