Vue组件化以及组件之间的通信

最早之前的组件化是seajs以及requirejs，但是对于组件化开发已经萌芽了，随着技术不断更新迭代，组件化开发已经很普遍，那他具有什么优势了？ 我们不妨想一下，在公司看到需求文档以及UI设计图的时候，我们会首先观澜全局页面，再把页面的每个模块拆分出更为细致的划分，与此同时也需要看每个页面是不是说有公用的ui以及相似的功能进行组件化开发。 那就先讲讲Vue组件化开发的优势：
1、便于代码复用
2、便于后期代码的扩展与延伸
3、提高开发效率
4、提升项目可维护性，便于多人开发
那么组件划分之后必然是需要进行父子、兄弟、祖孙设置没有任何关系的组件之间的互相通信 组件通信常用的方法：
1、props

实例：
// child
props:{
msg:{
type: String,
   defalut: ''
 }
}
// parent
<parent msg='welcome'>

2、event

实例：
// child
this.$emit('add', good)
// parent
<Cart @add="cartAdd($event)"></Cart>

3、事件总线

实例：
class Bus(){
  constructor(){
  	this.callback = {}	
  }
  $on(name,fn){
     this.callback[name]=this.callback[name]||[]
     this.callback[name].push(fn)
  }
  $emit(name,args){
  	this.callback.filter((item)=>{
      	let fnList = item[name]||[]
          if(fnList.length){
          	fnList.forEach((cb)=>{
              	cb()
              })
          }
      })
  }
  $off(name){
  	this.callback[name]=[]
  }
}

4、vuex

自定义事件
1、兄弟之间通信通过共同的祖父进行搭桥$parent|$root

// brother1
this.$parent.$on('foo', handle)
// brother2
this.$parent.$emit('foo')

2、$attrs/$listeners

// child：并未在props中声明foo
<p>{{$attrs.foo}}</p>
// parent
<HelloWorld foo="foo"/>

4、获取⼦节点引⽤$refs

// parent
<HelloWorld ref="hw"/>
mounted() {
this.$refs.hw.xx = 'xxx'
}

5、能够实现祖先和后代之间传值provide/inject

// ancestor
provide() {
return {foo: 'foo'} }
// descendant
inject: ['foo']