共计 929 个字符，预计需要花费 3 分钟才能阅读完成。
一、父组件与子组件通信 (父传子)
- 属性 props
// 父
<Helloworld info=”Hello World!” />
// 子
props:{info:String} - refs
// 父
<Helloworld ref=”hw” />
this.$refs.hw.xxx=’xxxx’// 此处 xxx 对应 Helloworld 子组件中的数据
ps: 须要留神父组件 created 中拿不到子组件 ref，因为父组件先于子组件创立，DOM 还没挂载渲染好，个别在 mounted 中应用 - 子元素 $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 类负责事件派发、监听和回调治理
正文完
