vue3 的模板引用ref和$parent

1.模板引用ref 和$parent是用来干什么的

模板引用ref，可以帮助我们获取子组件 的dom对象，

$parent 可以帮助我们获取父组件的dom对象，

众所周知，vue3 有两种形式，选项式和组合式，组合式不推荐使用$parent 获取父组件的dom对象，

1.1 接下来简要介绍一下模板引用ref的用法

• 组件中的模板引用
  1. 父组件如何利用模板引用ref获取子组件实际dom对象
     在对应的子组件添加ref属性
     
     添加完之后，接下来就是js获取dom对象了，因为获取的是dom对象 ，需要 在dom挂载完之后（mounted）才能获取,在还没挂载 的时候，获取的dom是undefined/null，
     对于选项式父组件，即可采用this.$refs.名字，即可获取dom对象
     

对于组合式父组件，需要利用useTemplateRef，获取ref引用对象，需要用在所有await之前，获取 实际dom，还是要在dom挂载完之后获取

2）子组件如何进行有选择的暴露

对于选项式子组件，在父组件利用模板引用ref,获取dom对象，就已经默认全部暴露，如果不想全部 暴露，可以利用expose属性，来决定暴露哪些属性和方法

对于组合式子组件，在父组件利用模板引用ref,获取dom对象，默认全部私有，父组件访问不了子组件的全部属性和方法，这时，就需要子组件利用defineExpose进行有选择的暴露部分属性和方法,

• v-for中的模板引用

  模板 引用ref 和v-for中连用，获取到的dom对象是个数组
  

• 函数中的模板引用

  在组件中添加的ref属性也可以是函数，但是需要动态绑定，:ref,该函数会在组件更新以及卸载时调用，卸载时调用获取 的dom对象是个null/undefined,，函数的第一个参数，即是dom对象，需要将此数据定义给一个数据变量或者ref属性，来接收dom对象
  

  1.2 因为组合式不推荐 使用parent,接下来就来介绍一下，选项子组件如何利用parent来获取父组件的dom对象

  选项式子组件获取父组件，即可在dom节点挂载结束之后，（mounted）利用this.$parent获取父节点的dom对象，关于父节点如何进行有选择的暴露，可参考上述子节点如何进行有选择的暴露