首页 > 其他分享 >Vue中的ref和$refs

Vue中的ref和$refs

时间:2023-11-11 21:22:39浏览次数:31  
标签:Vue 标签 refs 获取 查找 组件 ref

ref 和 $refs

作用:利用ref$refs 可以用于获取dom元素,或组件实例
特点:查找范围 -> 当前组件内(更精确稳定)

注意:在操作ref获取dom元素时,最快也得是mounted时期获取,也就是页面渲染之后

使用步骤:

  • 目标标签-添加ref属性
    <div ref="chartRef">我是div 标签</div>

  • 通过 this.$refs.xxx 获取目标标签
    mounted(){ conslo.log(this.$refs.chartRef)}

代码示例:
image

在上图中都有 ref='box' 但是由于ref的特性,它只会扫描当前组件的ref属性,即右图中只会在右图的容器中去查找,而不会在整个页面去查找。

通过ref获取组件实例

获取组件:

  • 目标组件-添加ref属性
    <BaseFrom ref='baseForm'></BaseForm>

  • 恰当时机,通过this.refs.xxx获取目标组件就可以调用组件对象里面的方法
    this.$refs.baseForm.组件方法()

image

image

可以看到确实调用了组件的方法。

标签:Vue,标签,refs,获取,查找,组件,ref
From: https://www.cnblogs.com/zgf123/p/17826385.html

相关文章

  • Vue2中的父子通信
    父子通信流程图:父组件通过props将数据传递给子组件子组件利用$emit通知父组件修改更新父组件传递子组件注意点但是需要注意的是,通过props传递的数据是只读状态的,也就是说,我们不能去修改这个值。注意:props是只读的,如果直接对props中的数据进行修改,Vue就会发出警告。如果......
  • vue 项目改为微应用后,原本的项目地址打不开为什么?
    当将Vue项目改为微应用之后,需要进行一些配置才能正常运行。首先,确保微应用项目的依赖中已经添加了qiankun,并在主应用的main.js中进行了相关配置。可以参考qiankun官方文档来配置主应用。在进行部署时,需要注意以下几点:跨域配置:微应用可能会存在跨域请求的问题。在部署时,需确保主应用......
  • 记录--啊?Vue是有三种路由模式的?
    这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助众所周知,vue路由模式常见的有history和hash模式,但其实还有一种方式-abstract模式(了解一哈~)别急,本文我们将重点逐步了解:路由+几种路由模式+使用场景+思考+freestyle路由概念路由的本质就是一种对......
  • train_logReg_param.o:train_logReg_param.cc:(.text+0x3407): more undefined refere
     001、make编译报错:train_logReg_param.o:train_logReg_param.cc:(.text+0x3407):moreundefinedreferencesto`std::__throw_out_of_range_fmt(charconst*,...)'follow 002、解决方法(可能是gcc版本的问题)a、gcc当前版本:(py38)[[email protected]]#gcc......
  • 11 11 vue3代码优化
     使用axios发送异步请求是这种格式,现在异步请求都封装到api中。说法如下:接口调用的js代码一般都会封装到js文件中,并一函数的形式暴露给外部,例如: 这张图片包括了没有参数和有参数的两种情况 然后在组件中的script中调用函数就行,但这样不行,好像跟什么同步异步有关,反正这样......
  • 数组的sort方法接受一个比较函数:compareFun(a, b); 如果返回的值>0,则调换a,b位置,即b的
    现有一组人员年龄的数据,要求将这些人员的年龄按照从小到大的顺序进行排列起来,要怎样来实现AfunctionnumberSort(a,b){returna-b;}vararr=newArray("23","6","12","35","76");document.write(arr.push(numberSort));BfunctionnumberSort(a,b){retu......
  • 如何快速纠正VCF文件中REF和ALT的位置错误?
    目录需求描述尝试解决正确解决需求描述一个很简单的需求:一批水稻材料的芯片数据(位点少),想看看它们在3KRice中处于何种亚群和位置。就需要将芯片位点与3KRG位点整合后进行分析。已知3KRice位点可从SNP-Seek中下载:https://snp-seek.irri.org/_download.zul;jsessionid=F2B11FD2......
  • vue2 vue.min.js和vue-cli-service build --target lib 构建的.min.js的压缩原理,使用
    1vue-cli-service --targetlibhttps://github.com/vuejs/vue-cli/blob/f0f254e4bc81ed322eeb9f7de346e987e845068e/packages/%40vue/cli-service/lib/commands/build/index.js#L5可以看到这里formats:'commonjs,umd,umd-min',默认有三种格式,其中的umd-min经过了压缩再去搜u......
  • vue里面数据
    <template><div><BaseCountItem></BaseCountItem><br><BaseCountItem></BaseCountItem><br><BaseCountItem></BaseCountItem></div></template><script>importBaseCo......
  • vue完成记事本小功能(没有css样式)
    app.vue<template><divclass=""><SchuRuKuang@Add="handleAdd"></SchuRuKuang><LieBiaoZhanShi:list="list"@delOne="handledelOne"></LieBiaoZhanShi><TongjiQingKo......