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对象,关于父节点如何进行有选择的暴露,可参考上述子节点如何进行有选择的暴露

相关推荐
灵感__idea5 小时前
JavaScript高级程序设计(第5版):好的编程就是掌控感
前端·javascript·程序员
烛阴7 小时前
Mix
前端·webgl
代码续发7 小时前
前端组件梳理
前端
试图让你心动7 小时前
原生input添加删除图标类似vue里面移入显示删除[jquery]
前端·vue.js·jquery
_Kayo_8 小时前
VUE2 学习笔记6 vue数据监测原理
vue.js·笔记·学习
陈不知代码8 小时前
uniapp创建vue3+ts+pinia+sass项目
前端·uni-app·sass
小王码农记8 小时前
sass中@mixin与 @include
前端·sass
陈琦鹏8 小时前
轻松管理 WebSocket 连接!easy-websocket-client
前端·vue.js·websocket
hui函数8 小时前
掌握JavaScript函数封装与作用域
前端·javascript
行板Andante9 小时前
前端设计中如何在鼠标悬浮时同步修改块内样式
前端