this.$refs.xx可以获取到，但是this.$refs.xx.style是undefined？

Question

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

Answer 1

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

Answer 2

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

Answer 3

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

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

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

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

Answer 4

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

Answer 5

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