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

clipboard.png

clipboard.png

clipboard.png

clipboard.png

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

阅读 3.5k
评论
    5 个回答

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

      • 7.7k

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

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

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

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

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

              撰写回答

              登录后参与交流、获取后续更新提醒

              相似问题
              推荐文章