vue组件系统提供了一种抽象，让我们可以使用独立可复用的组件来构建大型应用，任意类型的应用界 面都可以抽象为一个组件树。组件化能提高开发效率，方便重复使用，简化调试步骤，提升项目可维护性，便于多人协同开发。

一、组件通信常用方式

1、props

父组件传给子组件

父子组件交互，props和$emit

1
2
3
4
// child
props:{msg:String}
// parent
<HelloWorld msg="hello vue" />

2、自定义事件

子传父

1
2
3
4
//child
this.$emit('add',good)
// parent
<Cart @add="cartAdd($event)"></Cart>

3、eventBus事件总线

任意两个组件之间的传值常用事件总线或者vuex

4、$parent和$root

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

1
2
3
4
// brother1
this.$parent.$on('foo',handle)
// brother2
this.$parent.$emit('foo')

5、$children

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

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

6、$attrs、$listeners

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

1
2
3
4
// child:未在props中声明foo
<p>{{$attrs.foo}}</p>
// parent
<HelloWorld foo="foo">

7、refs

获取子节点引用

1
2
3
4
5
// parent
<HelloWorld ref="wrap">
mounted(){
    this.$refs.wrap.xx = "xxx"
}

8、provide/inject

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