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数据

我们可以这么写（代码自己敲啊，坑自己填，我只发截图哈哈哈啊哈哈哈！）



最终效果：



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

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