在以前的js中我们都是通过设置id,然后通过document.getelementbyid(hello) 来获取dom树进行操作,方便快捷。
但是在vue框架里面,我们都是通过ref设置来获取参数的,这个东西有一个 好处,对于普通的元素比如button而言,他就是一个跟js一样的dom树获取,但是对于组件而言,就可以获取整个组件对象(VC),我们可以通过这种方式获取组件里面的内容进行操作

我们用代码演示
设立了两个ref获取的元素,一个是原生的button一个是组件

<button  @click="showDom">点击输出dom元素</button>
 <HelloWorld ref="hello"></HelloWorld>
 <button ref="btn">btn获取按钮dom树</button>

点击按钮,分别输出这两个东西(this.$refs.hello指的是在vue下面的hello组件)

showDom(){
          console.log(this.$refs.hello);
          console.log(this.$refs.btn)
      }

观察输出我们可以轻易的得出结论,
对于组件而言,输出的是组件的实例对象,我们可以轻易的在这里获取到组件的内容
对于原生节点来说,这个跟document.getelementbyid() 一样的作用
在这里插入图片描述

Logo

前往低代码交流专区

更多推荐