VUE-使用refs获取嵌套组件中的值

最新推荐文章于 2024-02-01 21:20:23 发布
最新推荐文章于 2024-02-01 21:20:23 发布
阅读量6k 收藏 2
点赞数
CC 4.0 BY-SA版权
分类专栏： VUE
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/LzzMandy/article/details/91344675
本文介绍了一种在多层嵌套的Vue组件中，如何从最内层组件获取输入框值并传递到父组件的方法。通过使用this.$refs属性，可以逐层访问到具体的DOM元素，从而实现跨组件的数据交互。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

功能简介：

1、父组件包含zujian1，而zujian1又包含zujian2

2、zujian2绑定一个输入参数

<input  ref="query" v-model="query" @keypress="doSearch"/>

3、父组件获得输入框中的值，通过this.$refs.组件名来获取dom元素，多层嵌套，要调多次

 // 记录输入框的值
 this.inputValue=this.$refs.zujian1.$refs.zujian2.query

 

VUE+Element-ui中，在添加表单中嵌套了两个组件，每个组件中都有输入款，如何给嵌套组件输入框加必填项规则？
**My Coding Family**
07-11 783
🏆本文收录于 《全栈Bug调优(实战版)》 专栏，该专栏专注于分享我在真实项目开发中遇到的各类疑难Bug及其深层成因，并系统提供高效、可复现的解决思路和实操方案。无论你是刚入行的新手开发者，还是拥有多年项目经验的资深工程师，本专栏都将为你提供一条系统化、高质量的问题排查与优化路径，助力你加速成长，攻克技术壁垒，迈向技术价值最大化与职业发展的更高峰🚀！
vue的checkbox多选框获取其是否选中和获取其自定义属性值
weixin_30433075的博客
06-15 1342
1.第一种情况点击一个全选按钮使下面的所有的checkbox多选框选中或取消选中。如下图： 获取这个多选框的选中还是没有选中的状态 首先给这个全选的input多选框定义一个点击事件，给点击事件传入参数$event,从$event里面获取这个checkbox 选中状态true或false 2.第二种情况是获取循环生成的多个name相同的checkbox的一个多个选中的状态。 ...
VUE实现添加多个动态输入框并获取值
$狴犴^的博客
05-04 4251
VUE实现添加多个动态输入框并获取值HTMLCSS 完成样式的修改JS 代码片 实现思想: 运用数组创建多个数组对象变量, 然后存储在对应的数组里, 在需要提交的时候从数组中用下标取把属于同一列的数据取出来 HTML <div class="add-box"> <p>岗位要求：</p> <p>评论：</p> <p>权重：</p> </div>
Vue3嵌套ref小细节，自我解惑
IIIIIAN
02-01 854
对于ref方法中对对象中count的理解存在偏差。
vue2.0嵌套组件之间的通信（$refs，props，$emit）
weixin_33813128的博客
03-13 834
vue的一大特色就是组件化，所以组件之间的数据交互是非常重要，而我们经常使用组件之间的通信的方法有：props,$refs和emit。 初识组件之间的通信的属性和方法 props的使用 子组件使用父组件的数据，使用vue的属性props。 当我们在父组件parent里面嵌套一个子组件son的时候，如果我们需要使用父组件的数据的时候，我们可以在子组件标签上面绑定一个属性，然后在子组件里面通过...
vue中的ref 和$refs
白日强的博客
04-25 1068
&lt;div id="app"&gt; &lt;input type="text" ref="inp"/&gt; &lt;button @click="del"&gt;删除&lt;/button&gt; &lt;/div&gt;&lt;script&gt; new Vue({ el: "#app&q
vue-ueditor-wrap UEditor资源包
03-14
Vue-UEditor-Wrap是基于Vue.js开发的一个用于集成百度UEditor的组件，它使得在Vue项目中使用UEditor变得更加方便。UEditor是一款强大的富文本编辑器，它提供了丰富的文本格式化、图片上传、表格、代码高亮等功能，...
Vee-validate 父组件获取子组件表单校验结果的实例代码
10-16
对于子组件的验证结果在父组件中获取，可以通过 Vue.js 的 `ref` 特性实现。首先，在子组件模板中添加 `ref` 属性，如 `ref="usernameComponent"`，然后在父组件中，可以通过 `this.$refs.usernameComponent` 访问到...
vue-baidu-map插件中bm-marker组件嵌套bm-info-window组件
最新发布
11-26
在Vue-BaiduMap中，你可以将`bm-marker`组件作为父元素，并在其`props`中包含一个`event`属性，这个属性通常是一个自定义事件，比如`click`。然后，在`methods`中监听这个事件，触发后创建一个新的`bm-info-window`...
vue+element select组件结合vue-virtual-scroll-list插件解决数据量太大，导致渲染过慢
aiyang1214878408的博客
05-24 5821
因为项目中数据量有时候过于庞大，使用elementui的select组件时，会导致下拉框加载数据蛮并且卡顿甚至于卡死，为解决这个问题，发现vue-virtual-scroll-list这个插件，用来模拟虚拟滚动，从而解决问题。
VUE框架Vue3下使用ref函数包裹的对象实现响应式处理------VUE框架
在经历了无数个黑夜之后，我决定自己成为太阳
12-22 1306
VUE框架Vue3下使用ref函数包裹的对象实现响应式处理------VUE框架
Vue获取input的数据(ref/v-model)～VUE学习笔记
qq_44476929的博客
12-19 2292
初学VUE，仅供参考，有不足之处还请指出，谢谢 Vue获取input值是通过ref获取input数据 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="vue.js" type="text/ja...
vue中的ref
m0_67388537的博客
07-24 3384
2.遍历的元素,先定义一个空数组,定一个函数获取元素,返回给模板使用,通过ref绑定这个函数。1.单个元素:先声明ref响应式数据,返回给魔板使用,通过ref绑定数据。
VUE获取输入框中的内容
weixin_73569104的博客
04-29 2410
通过this.$refs.content 就可以访问到输入框中的值 ，content 名字可以随便起。当我们在做一些逻辑操作的时候，我们需要判断输入框中的值是否是我们所规定的输入的格式。我们将输入框中的值赋值给data中定义好的login。这时，我们可以给输入框添加 ref 的值，然后我们就可以进行输入框的判断了。
多级获取ref 写法儿
qq_37255910的博客
10-28 511
多级获取$refs 写法： this.$refs.aaa.$refs.bbb
vue+element 重置表单
Tz.的博客
11-23 2233
1.首先看效果图（官方的） 2.输入框配置 1.el-form标签中添加:model="" 和ref=""两个属性，属性值必须和data return中定义的对象名一样； 2.el-form-item标签中需要添加 prop属性，属性值和此el-form-item标签内输入框的v-model对象属性名一致，如v-model=“ruleForm.name” prop=“name” html标签： <el-form :model="ruleForm" :rules="rules" ref="ru
前端开发：Vue中获取input输入框值的方法
热门推荐
全沾软贱开发攻城狮
11-18 1万+
在前端开发过程中，会用到各种各样的基础组件，一些常用的组件的使用方法一定要滚熟于心，对于刚入门的新手来说，对基础知识的熟练掌握很重要，如果不熟练就会影响开发速度。那么本篇博文就来分享一个比较基础的知识点，在使用Vue开发的时候，使用input组件的时候，获取input输入框的值的方法，方便使用查阅。 在input使用过程中，一般常用的获取输入框的值的方法有三种：第一种是通过v-model双向绑定的方式来实现想要获取的input输入框的值，第二种是通过使用ref来获取输入框的值，第三种是通过监听输入框的变化
vue 获取后端json返回嵌套对象渲染问题
sout-lanys
01-04 6561
项目场景： 在前端项目中会遇到后端返回一个对象中存在多个实体的对象，若我们直接渲染(直接渲染第三级)，例如： html: <span>设备IMEI：{{items.deviceVO.imei}}</span><br> data: data () { items: '' } 虽然不影响渲染，但vue在浏览器会抛出警告。 问题描述及原因分析： 问题: Error in render: “TypeError: Cannot read properties of und
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

佛佛ง

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值