this.refs[‘tagInput‘].refs.input.focus()和this.$refs[‘tagInput‘].focus()区别

最新推荐文章于 2025-03-05 16:13:13 发布
最新推荐文章于 2025-03-05 16:13:13 发布
阅读量487 收藏 1
点赞数
文章标签： javascript 前端 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_45754184/article/details/134139966
版权

this.$refs['tagInput'].$refs.input.focus()和this.$refs['tagInput'].focus()两者之间的选择取决于你的组件结构和如何访问DOM元素。

1.this.$refs['tagInput'].$refs.input.focus():


2.这种语法假设你的this.$refs['tagInput']是一个组件实例，并且这个组件实例有一个名为input的$refs属性，其中包含一个真实的DOM元素。
3.这通常适用于嵌套组件，其中你希望访问内部组件的DOM元素。


4.this.$refs['tagInput'].focus():


5.这种语法假设this.$refs['tagInput']直接是一个真实的DOM元素，而不是一个组件实例。
6.如果你的tagInput是一个直接渲染到DOM的HTML元素，那么这种写法通常是正确的。

所以，你需要根据你的组件结构和需要访问的DOM元素的位置来选择正确的语法。如果tagInput是一个组件实例，你应该使用this.$refs['tagInput'].$refs.input.focus()来访问内部的input元素。如果tagInput直接是一个DOM元素，那么this.$refs['tagInput'].focus()就足够了。

el-table 内嵌 input 调用 focus 方法无效
jieweiwujie的博客
11-17 611
【代码】el-table 内嵌 input 调用 focus 方法无效。
关于vue.js element ui 表单验证 使用this.$refs[formName].validate()
qq_41008567的博客
04-21 1万+
实现form表单提交验证功能 model : 绑定整个表单model值 rules : 整个表单校验规则 ref ：获取该表单form组件 prop : 绑定每个表单的规则，写在el-form-item上 validate : 对整个表单进行校验的方法 valid : 每个必填表单项都提交为true,否则为false 1、简易版 表单提交 //使用element-ui 页面组件 <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label
vue this.$refs input 获取焦点
西瓜
03-16 8761
1.html <script src="//unpkg.com/vue/dist/vue.js"></script> <script src="//unpkg.com/element-ui@2.12.0/lib/index.js"></script> <div id="app"> <el-tree :data="data...
Vue中自动获取input焦点
热门推荐
weixin_40890907的博客
09-03 2万+
  &lt;input v-focus type="text" name="search" ref="input" autofocus v-model="inputValue" maxlength="10" @input="handleOnInput()" class="search-inp" placeholder="搜线路"&
Vue + el-ui table 内嵌 input 调用 focus 方法无效；this.$refs.xxx.focus()方法无效
TD_FAlmK的博客
09-18 2482
我又试了一下，当不把标签放在里的时候，比如正常表单（ref不是通过动态赋值）的时候，这段代码是完全没有问题的。如图，当在第一行 9999 处敲击回车之后，控制台打印出了this.$refs的所有组件，也打印了定位前和定位后的log日志，且没有报错，说明我们的代码是正确执行了的。学号HTML，JS，CSS吧，无论框架怎么变，底层都是这东西，当发现框架不支持的时候，可以考虑考虑原生的DOM实现。a.在表格编辑态的时候，可以在①处敲击“回车键”，光标能跳转到②处。
refs 自动获取 input 框焦点 记录
sky_hxq的博客
07-15 767
效果图 实现代码 componentDidMount = () => { // 用 ref 自动获取输入框焦点 const { input } = this.refInput; input.focus(); } <Input ref={input => { this.refInput = input }} style={{ width: 300 }} /...
uniapp console.log(this.$refs.keydataNoneRef) 打印有数据但是在点下去就会报错 this.$refs.keydataNoneRef.focus();
最新发布
04-03
### 关于 UniApp 中 this.$refs 调用 focus 方法时报错的解决方案 在 UniApp 中，`this.$refs` 是用于获取页面中的子组件或 DOM 元素的一个重要工具。然而，在某些情况下调用 `focus` 方法可能会报错，这通常是因为...
this.$refs[name].$refs.input.focus()
07-28
这是一个Vue.js中的代码片段，...`$refs[name]`表示获取ref为`name`的DOM元素或子组件实例，然后通过`$refs.input`获取该DOM元素或子组件实例中名为`input`的DOM元素。最后，调用`focus()`方法将焦点设置在输入框上。
this.$nextTick(_=>{ this.$refs.saveTagInput.$refs.input.focus() })帮我解析一下这行代码
05-19
回调函数中的代码是通过`this.$refs.saveTagInput`获取到保存标签输入框的Vue组件实例，并通过`$refs.input`获取到该组件中的输入框元素，并调用`focus()`方法让该输入框获取焦点。因此，这行代码的作用是让保存标签...
Vue 中的 $refs 是什么？如何使用它？
qq_38822390的博客
03-05 1037
refs在你的Vue组件模板中，你可以为任何元素或子组件添加一个ref属性。例如：< template > < div > < input ref = " myInput " type = " text " /> < button @click = " focusInput " > 聚焦输入框 </ button > </ div > </ template >
vue获取input的属性_Vue中自动获取input焦点
weixin_39580749的博客
12-19 1624
1.给input属性添加autofocus属性，缺点autofocus在移动版 Safari 上不工作2.Vue官网给出的解决办法// 注册一个全局自定义指令 `v-focus`Vue.directive('focus', {// 当被绑定的元素插入到 DOM 中时……inserted: function (el) {// 聚焦元素el.focus()}})//组件注册，与created、mou...
Uniapp踩坑 -- $ref无法使用,如何手动获取input焦点
aapprentice的博客
07-31 5383
经过网络搜索,没有找到什么简单实现的方法,无奈只能把自动变成手动data()里在失去焦点的时候,将focusState设为false,在需要获取的的时候再设为true== 0 &&!if (!})最终实现获取焦点1. uniapp 的内置组件不能使用$ref2. uniapp 不能使用document。
input取消焦点 vue_Vue中自动获取input焦点
weixin_39953673的博客
12-19 1002
1.给input属性添加autofocus属性，缺点autofocus在移动版 Safari 上不工作2.Vue官网给出的解决办法// 注册一个全局自定义指令 `v-focus`Vue.directive('focus', {// 当被绑定的元素插入到 DOM 中时……inserted: function (el) {// 聚焦元素el.focus()}})//组件注册，与created、mou...
this.$refs.selectRef.focus() 不生效问题解决
qq_44130459的博客
11-14 2525
在使用 el-select 组件时遇到一个问题：想利用方法来获取 el-select 的焦点并打开下列表，结果下拉列表并没有打开；
vue refs 动态给元素添加聚焦
旧忆时光的博客
11-26 4828
1.我使用回车提交数据，但是我在选择下拉菜单后，虽然提交了请求，但是element ui 的元素会处于聚焦状态你的回车会是的下拉框再次下拉下去（可自行去element select 组件 尝试） 于是我就想到解决办法，像在下拉change时间后，转移焦点，将焦点转移到输入框。 <el-input ref="input" placeholder="添加日程至“今日日程”，回车即可创建" v-model="formData.planName"
Vue宝典之this.$refs属性
Kuangtian的博客
12-13 2231
在 Vue.js 中，refs 属性是用来引用组件或 DOM 元素的。通过在模板中给元素或组件添加 ref 属性，我们可以在组件实例中使用 $refs 来访问这些元素或组件。在 Vue.js 中，refs 属性是一个非常有用的特性，它允许我们在组件中访问 DOM 元素和子组件实例。通过在模板中给元素或组件添加 ref 属性，我们可以在组件实例中使用 $refs 来访问这些引用。使用 refs 可以实现诸如操作 DOM 元素、调用子组件方法等功能。
Vue给DOM元素添加事件，页面加载后input文本框获取焦点
u010234868的专栏
09-17 541
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id=".
vue+iview,table中调用input聚焦undefined问题
Blue__Summer的博客
03-28 599
vue将你对data的更 改放到watcher的一个对列中（异步），只有在当前任务空闲时才会去执行watcher队列任务。nextTick是一个异步事件,他也会把这个事件放到一个队列当中，异步事件是不会立即执行的代码，会被js处理器放到一个队列里，按照队列的顺序优先级等一个个按次序执行，新添加的事件都会放在队列末尾。所以，当第一个也就是data的修改执行渲染在页面之后，这个时候执行nextTick,就可以获取到dom了.setTimeout同理。聚焦方式:this.$refs.input.focus()
vue input组件设置失焦与聚焦
YHJ_2298的博客
01-29 8165
我在iview-admin这个后台管理系统中，使用input输入框失焦时触发了一个axios请求，但是，当我从其它页面，携带input输入框的数据进入该页面，进行数据填充的时候发现，数据填充没有问题，但是因为没有触及到失焦事件，所以axios请求没有触发 把失焦事件改为@on-change事件也触发不了，所以我就在接收到其他页面的数据的同时，手动执行了聚焦与失焦事件，代码如下: 这是input输入框的内容： <Input ref="input" v-model="inputData" @on-
this.$refs.input.focus is not a function"
05-17
这个错误通常发生在 Vue.js 中，它的意思是你正在尝试在一个非输入元素上调用 `focus()` 方法。 通常，我们可以通过给输入元素添加 `ref` 属性来引用它，然后在需要的时候使用 `$refs` 来访问该元素。然而，如果 `$refs` 引用的元素不是一个输入元素，它就没有 `focus()` 方法，因此会导致该错误的发生。 如果你确定 `$refs.input` 是一个输入元素，那么你可以尝试在访问它之前等待 Vue.js 完成渲染，例如使用 `this.$nextTick()` 方法。代码示例： ``` this.$nextTick(() => { this.$refs.input.focus(); }); ``` 如果 `$refs.input` 实际上不是一个输入元素，你需要检查你的模板和组件代码，确保你正在引用正确的元素。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值