一、父组件与子组件通信(父传子)

  1. 属性props
    //父
    <Helloworld info="Hello World!" />
    //子
    props:{info:String}
  2. refs
    //父
    <Helloworld ref="hw" />
    this.$refs.hw.xxx='xxxx'// 此处xxx对应Helloworld子组件中的数据
    ps:须要留神父组件created中拿不到子组件ref，因为父组件先于子组件创立，DOM还没挂载渲染好，个别在mounted中应用
  3. 子元素$children
    //父
    this.$children[index].xx='xxx'
    ps:须要留神子元素不保障程序,也不是响应式，改值没有问题但不要试图批改、替换children树，只读

二、子组件与父组件通信

自定义事件：在子组件派发一个事件在父组件监听、解决（观察者模式？）// 子this.$emit('add', count)//父<Cart @add="onAdd($event)">// 此处是Cart组件上监听的，谁派发谁监听

三、兄弟组件通信

通过独特祖辈进行通信，$parent或$root(独特的父或独特的根)//父<HelloWorld msg="123" ref="hw" @add="onAdd($event)"><HelloWorld2>//子<div @click="$parent.$emit('biu')">//通过父去派发，监听  本该由父亲组件来做，能够在子组件中通过父去监听created(){    this.$parent.$on('biu',()=>{        console.log('biubiubiu~~~')    })}

四、先人和后辈(跨代传参)

因为嵌套层数过多，传递props不切实际，Vue提供了provide/inject API实现==>实现先人给后辈传值,反过来不实用，罕用于组件库的开发//ancestorprovide(){return foo: 'foo'}//{foo:'foo'}对象函数都能够component:{}//descendantinject:['foo']//数组props：{}

五、任意两个组件之间通信：事件总线或vuex

事件总线：创立一个Bus类负责事件派发、监听和回调治理