Vue中关于父子组件之间的通信

父子组件之间的通信是vue中的基础知识，在此做一个简单的梳理。
总的来说父传子是通过props，子传父是通过$emit。
简单的一个demo来说说，先上代码
父组件：

如图，HelloWorld是一个子组件，将它引入父组件并注册然后渲染这个自定义组件标签，第一点先看父向子传参，我们在父组件的data里定义了一个变量sw，并且在子组件标签上通过动态绑定的方式绑定了一个动态的qq变量来将sw变量传下去（凡是组件注入属性都得动态绑定，不然就会被当成字符串）
子组件：


子组件使用props接收参数，必须注意的是，props里的接收变量必须和动态绑定的那个变量一致，不然就接收不到，比如这儿都是用的qq这个变量，console如下

但是将接收变量改为mm时，console如下


到此，父组件向子组件传参就完成了。
接下来是子向父传参，前面说过是通过emit完成的，做法是在子组件内部当你需要向父组件传参时就自定义一个事件，如上图定义了一个ok的事件，这个事件不用做任何操作，需要做的是在父组件内去用v-on/@来监听这个事件，当监听到这个事件被传出时，那么print方法会自动执行，并且是自动获取到子组件传出来的参数作为print的入参(不需要写括号加形参的方式)，如果加了反而会报错

而正常时会是

然而会有报错

这是因为我们修改了由父组件传下来的参数，默认是不能直接修改props传进的参数的
还有就是props的写法，可以是像上图一样直接写数组，然后将接收变量定义成字符串，那么无论父组件传下来的是单个变量还是一个对象，其实都能被存进这个字符串的接收变量，当然还可以定义成对象的形式，同理，对象的属性名也必须和父组件传下来的保持一致

对象属性名改为了oo，就没有接收到数据
同样这儿的default可以去掉，他只是表示一种默认值


关于props还有一点是，它其实和data一样，都是定义数据的地方，只不过是props外部，data内部，
所以props里的变量名不能和data里的重复，会报错
关于emit也有几点：


它的原理是通过emit这个方法向父组件暴露自定义的事件ok，父组件监听这个自定义事件ok，当有参数self.qq被传出时，那么print方法将self.qq作为实际参数。
emit只能有两个参数，第一个是自定义事件，第二个是要传递的参数，若参数很多，那么只能将其包装成一个对象，然后在第二个参数传递出去。
至于为什么会加美元符号，是因为所有vue实例本身自带的属性在调用时都要加，比如根元素el，状态data，props在调用时都得加美元符号。

最后只得一提的是，这种父子组件的通信方式是典型的观察者模式。