Vue2.0 组件之间的通信

一、父子组件之间的通信

1、首先搭建环境

npm install vue-cli
vue init webpack vue-communicate
 //在里面的配置项，可以全部选择no
cd vue-communicate
npm run dev 

这样一个简单的vue项目就建好了，这里的项目比较简单，所以我们在配置的时候，全部都选择no，来加快安装进度，同时也可以减少干扰（其实也没干扰）。

2、布局文件格式，实现父向子组件传值

首先，我们可以把app.vue文件里面的内容清空，只需要留下外层的div就可以了，
接下来把hello.vue删除，新建我们自己的child.vue 文件。child.vue 文件如下：

接下来我们在app.vue文件中引用child.vue文件。

我们在子组件上添加message="hello1" ，这样子组件就会显示出hello1的字样。
当然啦，我们也可以绑定message。

页面可以显示你好，世界 的字样。

这里我们总结下父组件向子组件通信：

1. 子组件在props中创建一个属性，用以接收父组件传过来的值
2. 父组件中注册子组件
3. 在子组件标签中添加子组件props中创建的属性
4. 把需要传给子组件的值赋给该属性

3、子组件向父组件传值

3.1 在子组件中添加一个按钮，给按钮绑定一个点击事件：

3.2 在父组件中接收事件：

在控制台我们可以看到我们传递的值，表示我们传值成功了。

这里我们总结下子组件向父组件通信：

1. 子组件在中创建一个事件，用 this.$emit("listenChildEvent", "child子组件部分"); 派发事件
2. 父组件中接收子组件派发出来的事件，并进行操作

在通信中，无论是子组件向父组件传值还是父组件向子组件传值，他们都有一个共同点就是有中间介质，子向父的介质是自定义事件，父向子的介质是props中的属性。抓准这两点对于父子通信就好理解了
引自：https://www.jianshu.com/p/2670ca096cf8

---