this.$refs.xx可以获取到,但是this.$refs.xx.style是undefined?

zermi
  • 25

clipboard.png

clipboard.png

clipboard.png

clipboard.png

我看网上的教程都是用style啊 怎么报undefined呢?

评论
阅读 4.3k
5 个回答

。。最好理解为什么这样写,比较好,this..$refs.btnRight.$el.style 才是你要的

要访问DOM的attr属性,需要在this.$refs.btnRight.$el.style中访问,vue推荐的做法是直接在标签上绑定动态属性
:style={height:''}

ref指向的不确定性导致了你的疑惑。ref指向有以下几种情况

// 指向dom元素
<div ref="div"></div>

// 指向组件对象
<Button ref="btn"></Button>

// this.refs.btnList是一个列表,列表里的每一项是一个组件对象
<Button v-for="xx in xx" ref="btnList">

如3楼所示,$refs下面对应的值是多种,你这里对应的Button组件实例,并非直接dom, 你输出看 $refs.xxx看,并没有style。
另外不推荐直接操作dom修改样式
其次当前vue版本里面,一旦使用了$refs, 就会导致其自身和子元素所有dom无法释放,占用一定内存,原生api主动移除不能移除自身,只能移除子元素,vue3版本有望修复

打印一下this.$refs.btnRight你就会发现style在this.$refs.btnRight.$el下面

宣传栏