关于vue.js:VUE组件通信总结

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

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 实现 ==> 实现先人给后辈传值, 反过来不实用，罕用于组件库的开发
//ancestor
provide(){return foo: 'foo'}//{foo:'foo'} 对象函数都能够
component:{}
//descendant
inject:['foo']// 数组
props：{}

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

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