Kira技术博客

# 组件通信

组件通信常用方式

  • props
  • eventBus
  • vuex
  • 自定义事件（接收props）

边界情况

  • $parent
  • $children
  • $root
  • $refs
  • provide/inject
  • attrs
  • listeners

# props父组件给子组件传值

//parent 
<Hello :msg="hello"></Hello>
//child
props:{
    msg:string
}

# 父子组件通信

子组件emit，在父组件中通过自定义事件接收子组件的emit触发，

注意：父子组件通信 是在子组件中触发，在子组件中监听。

# eventBus事件总线实现

事件总线实现思路，发布订阅模式 $on $emit $off

class Bus {
    constructor(){
    this.callbacks = {}
    }
    $on(name, fn){
        this.callbacks[name] = this.callbacks[name] || []
        this.callbacks[name].push(fn)
    }
    $emit(name, args){
        if(this.callbacks[name]){
            this.callbacks[name].forEach(cb => cb(args))
        }
    }
}
//使用
// main.js
Vue.prototype.$bus = new Bus()
// child1
this.$bus.$on('foo', handle)
// child2
this.$bus.$emit('foo')

# $parent/$root

兄弟组件之间通信可通过共同父辈搭桥和evenBus事件总线类似，事件的派发者和监听者必须是同一个。

this.$parent.$on('test',fn)
this.$parent.$emit('test')

# $children

父组件可以通过$children访问子组件实例实现父子组件通信

$children不能保证子元素顺序，（如果某一个组件是异步组件，那么$children子元素的顺序是不确定的）

this.$children[0].xx == 'xxx'

# $attrs的使用

//父组件中
<Children :msg="111"/>

//子组件
如果子组件不同props接收，父组件传过来的msg，那么msg就会把收纳到$attrs中 $attrs中数据内容 {"msg": 111 }

# refs

获取子节点的引用。还可以获取DOM元素

# provide/inject

祖辈组件之间传值

//祖辈组件
provide(){
    return {hello :"111"}
}
//子组件
inject:['hello']

# .sync修饰符

父子组件在传递值类型时，子组件修改值想要父组件同步更新。可以通过.sync方法简写 @update:msg = "msg = $event"作用和 .sync作用一致。

//父组件
<template>
    <div>{{msg}}</div>
    <children 
        :msg.sync="msg"
        @update:msg = "msg = $event"//vue2写法
        :msg.sync = "msg"//vue2语法糖
        v-modal:msg="msg"//vu3去掉sync写法，使用v-modal语法糖
    />
</template>

//子组件
export default {
    props:{
        msg:[String,Number]
    },
    methods: {
      changeInfo(){
         this.$emit('update:msg','111')
         console.log( this.msg)
      }
    }
}

# 插槽

  • 匿名插槽
//父组件 
<Hello>123</Hello>

//子组件
<template>
    <solt></solt> //展示123
</temaplate>
  • 具名插槽，即指定名字的插槽
//父组件
<Hello>
    <solt name="header">111</solt>
</Hello>
//子组件
<template v-slot:header></template>
  • 作用域插槽 分发内容用到子组件的数据

← vue3 →