vue2.0父子组件间通信实现

最近公司做项目要求使用vue，于是开始了vue的学习历程，开始的时候，整个人都是懵逼的状态， 公司项目也是比较复杂，但是开工没有回头箭，没有结果的努力就是对工作的不负责任，于是乎下定 决心一定要搞清楚，现在项目已接近尾声，大体来总结下知识点，本篇文章先来探讨一下Vue子父组件通信的问题。

首先创建两个组件，分别为父组件和子组件如图

parent.png

child.png

通信分为两种，一为父组件向子组件传值，二为子组件向父组件传值，接下来一一介绍：

一、父组件向子组件传值

1. child.vue的中创建props(可以验证数据类型)，然后创建一个名为message的属性来接收

2 在父组件parent.vue中，注册child组件,并在父组件中添加子组件模板，给message属性传入相应的值即可

打开服务器观察，看到相应改变

当然message的属性值也可以动态绑定值,:message="变量名"，这里不做叙述。

---

二、子组件向父组件传值

1. 先在子组件添加个按钮，点击触发事件进行传值

2 在响应的事件中使用$emit来触发自定义事件，并向父级传参

（可以看出现在的值为空）

3 在父级添加响应事件，并监听事件，可以定义个变量childData来接收此值

现在点击按钮，观看页面

总结：无论是父组件向子组件传值，还是子组件向父组件传值，都需要中介，父组件向子组件传值需要props属性，子向父需要使用$emit触发自定义方法，知道这两点应该就差不多了。

刚接触vue，不对的地方还请多多指教，欢迎探讨