乘风原创程序

  • vue使用refs获取嵌套组件中的值过程
  • 2022/3/31 13:51:22
  • 使用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 一起使用时,获取到的引用会是一个数组,包含和循环数据源对应的子组件。

    以上为个人经验,希望能给大家一个参考,也希望大家多多支持本教程网。