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如何调用摄像头实现拍照上传图片、本地上传图片的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2023-07-07
vue3发布正式版不久，生态还没完全发展起来，目前支持vue3的开源markdown编辑器组件基本上也寥寥无几，向大家推荐一个很好用的v-md-editor 组件，组件功能很强大，文档也比较详细。该文章只介绍组件的常用功能，更多高级的功能可以参考官方文档。2021-05-05
Vue中router-link如何添加mouseover提示
这篇文章主要介绍了Vue中router-link如何添加mouseover提示，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-11-11
这篇文章主要介绍了Vue "...infinite update loop..."的问题解决，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-04-04
vue数据双向绑定是通过数据劫持结合发布者-订阅者模式的方式来实现的.本文重点给大家介绍Vue数据双向绑定原理及简单实现方法，感兴趣的朋友跟随脚本之家小编一起学习吧2018-05-05
本篇文章主要介绍了Vue利用canvas实现移动端手写板的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-05-05
在vue项目中,将图片下载可使用流的形式,下载成单个图片,或者将多个图片下载至zip包,本文就是介绍使用a标签下载图片的用法,文中有详细的代码示例供大家参考,具有一定的参考价值,需要的朋友可以参考下2023-10-10
在vue中会将常用的组件进行封装,下面这篇文章主要给大家介绍了关于Vue组件封装之input输入框的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下2022-10-10
Vue组件模板形式实现对象数组数据循环为树形结构(实例代码)
这篇文章主要介绍了Vue组件模板形式实现对象数组数据循环为树形结构,本文用vue实现方式，非常不错，具有参考借鉴价值，需要的朋友可以参考下2017-07-07
开发过程中，如果后端一次性返回你1000多条图片或数据，那我们前端应该怎么用什么思路去更好的渲染呢？这篇文章主要介绍了vue处理一千张图片进行分页加载,需要的朋友可以参考下2023-02-02
最新评论