vue使用refs获取嵌套组件中的值过程
更新时间：2022年03月31日 16:20:39 作者：佛佛ง
这篇文章主要介绍了vue使用refs获取嵌套组件中的值过程，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
使用refs获取嵌套组件的值
功能简介：
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使用ref的好处
当我们需要在 JavaScript 中直接访问子组件。
为此可以使用 ref 为子组件指定一个引用 ID
<div id="parent">
<p ref="profile" id="profile"></p>
</div>
var parent = new Vue({ el: '#parent' })
// 访问子组件实例
var child = parent.$refs.profile
console.log(child )// <p ref="profile" id="profile"></p>这与document.getElementById(“profile”)获取dom节点的作用是一样的，但使用ref会减少获取dom节点的消耗
当 ref 和 v-for 一起使用时，获取到的引用会是一个数组，包含和循环数据源对应的子组件。
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要为大家详细介绍了vue实现动态表单动态渲染组件的方式第二篇，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-04-04
element UI中el-dialog实现拖拽功能示例代码
我们在开发中常会遇见拖拽的功能,下面这篇文章主要给大家介绍了关于element UI中el-dialog实现拖拽功能的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-12-12
最近在做小程序开发的时候，遇到了点问题。最终选择用mpvue来做，谁知这么多坑，下面小编把我遇到的问题分享给大家，如果大家对mpvue小程序仿qq左滑置顶删除组件相关知识感兴趣的朋友一起看看吧2018-08-08
为了方便大家写代码，Vue给大家提供了很多方便的修饰符，比如我们经常用到的取消冒泡，阻止默认事件等等，这篇文章将给大家分享Vue 中的常用的修饰符2022-10-10
这篇文章主要介绍了vue之使用vuex进行状态管理详解，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
这篇文章主要介绍了vue3+ts使用Echarts的实例详解,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-03-03
Vite默认集成了对Sass的支持,你只需要安装Sass本身即可,这篇文章主要介绍了vite 项目中如何使用Sass,需要的朋友可以参考下2024-04-04
这篇文章主要介绍了vue-cli3设置代理无效的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-07-07
本文主要介绍了常见路由跳转的几种方式，主要介绍了四种常见方式，具有一定的参考价值，感兴趣的可以了解一下2023-09-09
最近在做车辆模拟地图,在实现控制站点名称按需显示,下面通过本文给大家分享vue3实现模拟地图站点名称按需显示的功能,感兴趣的朋友跟随小编一起看看吧2024-06-06
最新评论