Vue面试之组件通信的方式总结（下篇）

        最近在整理一些前端面试中经常被问到的问题，分为vue相关、react相关、js相关、react相关等等专题，可持续关注后续内容，会不断进行整理~

        在Vue框架中，提供了多种组件通信方式：props父子组件传参、插槽传参、Event Bus方式、vuex方式传参等，之前已对前两种方式进行了总结，本文继续总结其余方法~

$ref

在Vue中很少会直接操作DOM，但是一般情况下会用ref和$ refs取某DOM结构，具体来说：利用ref给元素或子组件注册信息，则该信息就会被注册到父组件的$ refs对象上。
$refs是一个对象，包含已经注册过ref的所有子组件的内容

ref有三种用法：

1. ref加在普通元素上，则通过this.$refs.xxx获取到的是dom元素；

<p id="p1" ref="p1">这是第一段</p>

console.log(this.$refs.p1) // 就可以拿到p1对应的dom元素

2. ref加在子组件上，则通过this.$refs.xxx获取到的是组件，可拿到子组件的所有属性和方法，实现子组件向父组件通信；同时如果在使用子组件方法时传入参数，则可以实现父组件向子组件通信；

上图展示了利用this.refs.xxx可以获取到子组件身上的所有属性和方法，从而实现子组件向父组件通信；
这里需要注意的一点是，$refs只有在子组件被渲染后才能拿到，使用时一定要确保子组件已经被渲染，否则拿到的只能是undefined
父组件利用子组件的submit方法，可在使用时传递参数，这样调用时，子组件就可以拿到传递过来的参数值，实现父组件向子组件的通信；

<!-- 父组件中 -->
<Son ref="son"></Son>
<button @click="finish">提交</button>