组件间传值、通信

记录这篇笔记用以加深印象以及后续翻阅巩固。

1、父子组件

1、父组件给子组件传值

  • 属性props
//child
props:{msg:String}

//parent

  • 引用refs获取子组件实例
//parent

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

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,通过它管理数据并通知组件状态变更

你可能感兴趣的:(组件间传值、通信)