详谈vue父子组件之间通信

组件是 vue.js最强大的功能之一，但是在实际应用中各个组件实例的作用域是相互独立的，这就意味着不同组件之间的数据无法相互引用。这篇文章主要来介绍vue中父子组件之间怎么传递数据，进行通信。

1.通过prop实现通信（父组件向子组件）

子组件的props选项能够接收来自父组件数据。由于props是单向绑定的，即只能父组件向子组件传递，不能反向。传递的方式可以分为两种：

（1）静态传递

子组件通过props选项来声明一个自定义的属性，然后父组件就可以在嵌套标签的时候，通过这个属性往子组件传递数据了。

（2）动态传递

我们已经知道了可以像上面那样给 props 传入一个静态的值，但是我们更多的情况需要动态的数据。这时候就可以用 v-bind 来实现。通过v-bind绑定props的自定义的属性，传递去过的就不是静态的字符串了，它可以是一个表达式、布尔值、对象等等任何类型的值。

2.通过$emit 实现通信（子组件向父组件）

通过$emit 实现子组件向父组件通信。

vm.$emit( event, arg )

$emit 绑定一个自定义事件event，当这个这个语句被执行到的时候，就会将参数arg传递给父组件，父组件通过@event监听并接收参数。