vue使用refs获取嵌套组件中的值过程

目录

• 使用refs获取嵌套组件的值
• vue使用ref的好处

使用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 一起使用时，获取到的引用会是一个数组，包含和循环数据源对应的子组件。

以上为个人经验，希望能给大家一个参考，也希望大家多多支持三水点靠木。