vue2.0中的组件通信操作1——父组件向子组件下发数据

Vue.js最大的特性之一就是组件化开发方式，带来的一点小问题就是数据分散到了各个组件中，不像传统的一个.html页面的基本上所有的数据都在一个页面上无缝操作。Vue.js中也有实现数据共享的机制，在Vue.js中叫做组件通信，简单来说就是在组件之间完成传递数据的操作。你想要它手里的数据，可以拿到，他想要你的数据，也可以获取。
那么，组件通信如何实现呢？组件一般可以分为父子组件和兄弟组件，我们先来看看父组件如何向子组件中传递数据：
父组件向子组件传递数据
这是我用vue-cli构建出来的的目录结构：

这里我只是增加了两个子组件：childOne.vue和childTwo.vue。将APP.vue作为它们的父组件。
vue2.0文档中说：

父组件的数据需要通过 prop 才能下发到子组件中。 子组件要显式地用 props 选项声明它预期的数据

第一步：先写出基本的组件结构
APP.vue:

childOne.vue:在里面我们声明了props属性

childTwo.vue与childOne结构一致，先看最初的效果：

第二步：实现父组件数据的共享

我们在组件声明了props属性，在父组件中我们就通过这个属性来修改子组件中的值，

子组件中可以通过{{}}使用

效果如下：

当然，数据不会是死的，我们可以绑定父组件中的数据，让子组件的数据跟着父组件中的数据进行变化。
比如我们要传递父组件中的msg数据
我们可以这么写（代码自己敲啊，坑自己填，我只发截图哈哈哈啊哈哈哈！）

最终效果：

这样，父组件中的数据就可以拿到了。

下一篇讲子组件向父组件传递数据。