记录这篇笔记用以加深印象以及后续翻阅巩固。
1、父子组件
1、父组件给子组件传值
- 属性props
//child
props:{msg:String}
//parent
<child mag='北海，你要多想'>
- 引用refs获取子组件实例
//parent
<child ref='child'>
this.$refs.child.attr = '北海，你要多想'
- $children获取子组件实例
注意$children不保证顺序，不是响应式的（https://cn.vuejs.org/v2/api/#vm-children）
//parent
this.$children[0].attr = '北海，你要多想'
2、子组件给父组件传值
- 自定义事件
用$emit去派发事件，然后在父组件引用子组件的地方监听该事件，监听者仍然是子组件实例，就是谁发布，谁监听
//child
this.$emit('hi',hello)
//parent
<child @hi='listenFn($event)'>
listenFn(e){
condole.log(e)
}
2、兄弟组件
通过共同的祖辈组件搭桥 root
(谁发布，谁监听)
//brother1喊
this.$parent.$emit('hi')
//brother2听
this.$parent.$on('hi',()=>{
console.log('hi,我听到了')
})
3、祖先和后代
- provide/inject:能够实现祖先给后代传值
祖先提供值，孩子注入值，只适用于祖先给后代传值，单向的，只适用于组件库的开发，平时不要用也没必要
//ancestor
//provide可以用对象也可以用函数，跟data很类似
provide(){
return {hibaby:'孩子，你们有兄弟'}
}
//descendant
//inject跟props用法很类似
//这个传递的值虽然是响应式，但官方建议不要去改，如果一定要改，那就在传递这个值的时候，顺便传一个可以改变这个值的函数进来
inject:['hibaby']
小技巧：传祖先组件的实例：
provide（）{
that:this
//注意这里只能用函数，如果用对象那this指向可能有问题
}
4、任意两个组件之间
- 事件总线：创建一个Bus类负责事件派发、监听和回调管理
//创建一个独立的实例，专门用来监听和派发事件
//平时工作中这么写，是因为vue已经实现了bus类的功能
Vue.prototype.$bus = new Vue()
//Bus类
class Bus{
constructor(){
{
event1:[fn1,fn2],
event2:[fn3,fn4],
}
this.callbacks = {}
}
$on(name,fn){
this.callbacks[name] = this.callbacks[name] || []
this.callbacks[name].push(fn)
}
$emit(name,fn){
if(this.callbacks[name]){
this.callbacks[name].forEach(cb => cb(args))
}
}
//main.js
Vue.prototype.$bus = new Bus()
//child1
this.$bus.$emit('hiBrother')
//child2
this.$bus.$on('hiBrother',hearYouFn)
- vuex：创建唯一的全局数据管理者store，通过它管理数据并通知组件状态变更
