Vue面试系列之九:vue组件之间的通信

vue组件系统提供了一种抽象，让我们可以使用独立可复用的组件来构建大型应用，任意类型的应用界面都可以抽象为一个组件树。

组件化能提高开发效率，方便重复使用，简化调试步骤，提升项目可维护性，便于多人协同开发。

首先，组件通信常用方式：

1. props
2. eventbus(事件总线)
3. vuex

组件通信

props

父给子传值

// child
props:{msg:String}

// parent
<Helloworld msg="welcome to Your vue.js App">

自定义事件

子给父传值

// child
this.$emit('add',good)

// parent
<Cart @add="cartAdd($event)"></Cart>

eventbus(事件总线)

任意连个组件之间传值常用事件总线

// Bus：事件派发、监听和回调管理
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')

vuex

创建唯一的全局数据管理者store，通过它管理数据并通知组件状态变更。

$parent/$root

兄弟组件之间通信可通过共同祖辈搭桥，$parent或$root。

// brother1
this.$parent.$on('foo', handle)

// brother2
this.$parent.$emit('foo')

$children

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

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

注意：$children不能保证子元素顺序

$attrs/$listeners

包含了父作用域中不作为 prop 被识别 (且获取) 的特性绑定 ( class 和 style 除外)。当一个组件没有 声明任何 prop 时，这里会包含所有父作用域的绑定 ( class 和 style 除外)，并且可以通过 vbind="$attrs" 传入内部组件——在创建高级别的组件时非常有用。

// child：并未在props中声明foo
<p>{{$attrs.foo}}</p>

// parent
<HelloWorld foo="foo"/>

refs

获取子节点引用

// parent
<Helloworld ref="hw">

<style>
mounted(){
    this.$refs.hw.xx="xxx"
}
<style>

provide/inject

能够实现祖先和后代之间传值

// ancestor
provide() {
    return {foo: 'foo'}
}
// descendant
inject: ['foo']

最后

说一下在项目中怎么选用通信方式，其实只要设计到简单的数据传递，则选择props即可；如果项目中涉及到需要保存状态的时候，则建议选择vuex等。