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

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

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

parent.png

child.png

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

1、父组件向子组件传值

1. child.vue的中建立props(能够验证数据类型)，而后建立一个名为message的属性来接收

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

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

固然message的属性值也能够动态绑定值,:message="变量名"，这里不作叙述。

---

2、子组件向父组件传值

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

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

（能够看出如今的值为空）

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

如今点击按钮，观看页面

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

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