vue里面的ref详解

在以前的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() 一样的作用

vue里面的ref详解相关推荐

使用Vue里面的ref 控制DOM元素的样式marginleft，marginLeft的只是变化了，但是视图没有变化，求解答
使用Vue里面的ref 控制DOM元素的样式marginleft,marginLeft的只是变化了,但是视图没有变化,求解答 <template><div><div cl ...
vue 3.0 Refs详解
目录 ref unref toRef toRef和ref的区别 toRefs isRef customRef shallowRef和triggerRef ref 接受一个内部值并返回一个响应式且可变的 ...
ant design pro vue 动态路由流程详解
ant design pro vue 动态路由流程详解前言流程图流程1 src/permission.js 流程2 src/store/modules/user.js 流程3 src/perm ...
vue3 效率的提升、composition-api 和 ref 详解
vue3 效率的提升.composition-api 和 ref 详解文章目录 vue3 效率的提升.composition-api 和 ref 详解 vue3 效率的提升优化diff算法 hoi ...
vue中mint-ui使用详解
这次给大家带来vue中mint-ui使用详解,vue中mint-ui使用的注意事项有哪些,下面就是实战案例,一起来看一下. mint-ui在vue中的使用,供大家参考,具体内容如下首先放上mint- ...
【Linux开发】全面的framebuffer详解
全面的framebuffer详解一.FrameBuffer的原理 FrameBuffer 是出现在 2.2.xx 内核当中的一种驱动程序接口. Linux是工作在保护模式下,所以用户态进程是无法象D ...
加载vue文件步骤_vue中.vue文件解析步骤详解
这次给大家带来vue中.vue文件解析步骤详解,vue中.vue文件解析的注意事项有哪些,下面就是实战案例,一起来看一下. 我们平时写的 .vue 文件称为 SFC(Single File Compo ...
实例化vue发生了什么?(详解vue生命周期)
实例化vue发生了什么?(详解vue生命周期) 本文将对vue的生命周期进行详细的讲解,让你了解一个vue实例的诞生都经历了什么~ 我在Github上建立了一个存放vue笔记的仓库,以后会陆续更新一些 ...
vue里面的model
vue里面的model双向绑定,就是一种代码组合即语法糖,我们之前在实现功能的时候,父组件通过props向子组件里面传递参数,子组件处理完成之后,如果想将结果传回父组件的话,需要调用emit里面的自定 ...

vue里面的ref详解

vue里面的ref详解相关推荐

最新文章

热门文章