vue ref和$refs 获取元素dom、获取子组件数据与方法

vue ref和$refs 获取元素dom、获取子组件数据与方法

码农世界 2024-05-16 前端 52 次浏览 0个评论
作用

        ref和$refs配合使用可以用于获取DOM元素或组件实例

特点

        查找范围在当前组件内,更精确稳定,范围更小

使用
获取DOM

        (1)在目标标签添加ref属性

测试测试

        (2)获取DOM

        通过this.$refs.xxx获取,获取到了还可更改此元素样式等

const demoDom =  this.$refs.demo;
获取子组件实例

          (1)在子组件标签添加ref属性

        (2)获取子组件实例

        也是通过this.$refs.xxx获取,获取到了即可拿到子组件的数据和方法

const sonDom = this.$refs.sonRef;
完整例子

        父组件代码(含vue3写法喔)




        子组件代码


        效果

转载请注明来自码农世界,本文标题:《vue ref和$refs 获取元素dom、获取子组件数据与方法》

百度分享代码,如果开启HTTPS请参考李洋个人博客
每一天,每一秒,你所做的决定都会改变你的人生!

发表评论

快捷回复:

评论列表 (暂无评论,52人围观)参与讨论

还没有评论,来说两句吧...

Top