Vue中通过$refs获取嵌套子组件数据的方法与优势

使用refs获取嵌套组件的值

功能简介：

场景设定为：父组件内部包含zujian1，而zujian1内部又嵌套了zujian2。

在zujian2中绑定了一个输入参数。

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

父组件需要获取该输入框中的值，可以通过this.$refs.组件名的方式获取DOM元素。由于涉及多层嵌套，需要连续调用多次$refs才能最终访问到目标数据。

 // 记录输入框的值 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循环结合使用时，获取到的引用将是一个数组，该数组包含与循环数据源对应的所有子组件实例。

以上为个人经验，希望能给大家一个参考，也希望大家多多支持本站。