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深度监听(监听对象和数组的改变)与立即执行监听实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-09-09
这篇文章主要介绍了Vue.js 模板语法和数据绑定，文章围绕主题展开详细的内容介绍，具有一定的参考价值，需要的小伙伴可以参考一下2022-05-05
这篇文章主要介绍了vue使用路由的query配置项时如何清除地址栏的参数，本文通过案例给大家分享完美解决方案,需要的朋友可以参考下2023-09-09
这篇文章主要介绍了vue多语言转换的几种方法总结，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-02-02
本文主要介绍了Vue3管理后台项目使用高德地图选点的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-07-07
探通过本篇文章给大家探讨不同场景下组件间的数据“交流”的Vue实现方法，感兴趣的朋友一起看看吧2017-08-08
最近vue.js 非常火热，小编也趁机学习了下vuejs的一些基础知识，于是尝试做一个像微信平台里的菜单编辑器功能，下面脚本之家小编把vue.js 微信公众号菜单编辑器功能的实现代码分享给大家，需要的朋友参考下2018-05-05
我们在vue项目里面用HTML标签构建页面时最终会被转化成vnode,而h()是直接创建vnode,因此h()能以一种更灵活的方式在各种各样情景下构建组件的渲染逻辑,并且能带来性能方式的提升,本文介绍如何使用和列出具体的应用场景,需要的朋友可以参考下2024-08-08
在之前的前端开发中，为了实现我们的需求，通常采用的方案是通过 JS/Jquery 直接操纵页面的 DOM 元素，得益于 Jquery 对于 DOM 元素优异的操作能力，我们可以很轻易的对获取到的 DOM 元素进行操作。这篇文章主要介绍了Vue 中 ref 的使用 ,需要的朋友可以参考下2019-04-04
这篇文章主要为大家详细介绍了vue+Element-ui实现分页效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-11-11
最新评论