vue - 组件通信

使用vue开发项目其中之一的原因就是由于它的组件化。你可以将一个复杂的页面分为好多个小的组件，各自实现一个小功能使页面的逻辑更加清晰。那么这么多的组件是怎样将它们连接起来的呢，那就离不开组件之间的通信了。

组件通信分为两种。一种是父组件给子组件传送数据，另一种则就是子组件给父组件传送数据了。

下面我通过几个简单的例子来简单说明一下组件之间是怎么通信怎样传送数据的。

父组件给子组件传送数据

假设我们现在想要实现一个父组件给子组件传送一个name，子组件在页面中显示该name的功能。

子组件我们就叫author，父组件叫title。在传送数据之前假设我们已经将框架什么的已经搭好。

在子组件中我们需要通过设置prop属性来定义我们需要的数据。父组件中我们需要使用:bind来设置。
父组件：

• :为v-bind的简写；
• names为子组件中需要的数据；
• name为父组件给子组件传送的数据。

子组件：

通过prop来设置需要接收的值。

• String为names需要接收值的类型。

子组件给父组件传送数据

假设我们现在实现的功能是，通过点击子组件的按钮来改变父组件的点击分享次数。
子组件：

点击触发share，函数执行同时需要通知父组件。此时我们可以通过$emit()来实现。它可以接收两个参数：

1. 自定义的事件：需要和父组件保持一致。在这里我定义的事件名称为shared。
2. 根据需要自己传入就可以了，这个参数是非必需的。

父组件：


这里写图片描述

通过@➕自定义事件来完成。这里就是@shared。当触发shared事件时完成shareing函数。在shareing中来完成对次数的改变。

大功告成啦～休息一下下！