通过ref实现父子通信
可以使用该子元素上的属性和方法,也是父子通信的常用方法
在vue2项目中,给dom上添加ref属性,可直接通过this.$ref.ref属性值即可直接拿到该dom元素,可直接使用该dom元素上的属性和方法
但在vue3项目中
想要在父组件中使用子组件上的变量和方法必须在子组件中通过defineExpose将要使用的变量和方法暴露出去才能使用
1. 给子组件添加ref属性
![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/9bd1502ae22c44289f4a6bd7b8d16604.png)
2. 通过声明同名ref属性值的变量拿到dom元素
![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/9ab8f2b267a94ceaaac19a3c0b82c9ec.png)
3.将想要在父组件中使用到的变量或方法通过defineExpose暴露出来
![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/cb06916a31174efdbdf6c309e05cfc22.png)
4.直接在父组件中调用dom上暴露出来的方法
![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/e8da4102598b43bf877eac5e63151edc.png)