本文小编为大家详细介绍“vue怎么使用refs获取嵌套组件中的值”，内容详细，步骤清晰，细节处理妥当，希望这篇“vue怎么使用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
当我们需要在 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怎么使用refs获取嵌套组件中的值”文章已经介绍完毕，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注亿速云行业资讯频道。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
