uniapp中的ref使用

uniapp

首页 > 前端框架 > uniapp >

 admin  2022-07-03 11:20:20 

被用来给元素或子组件注册引用信息，引用信息将会注册在父组件的 $refs 对象上。
如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例：

<view ref="content">hello</view>



<child-component ref="child"></child-component>

当 ref 和 v-for 一起用于元素或组件的时候，引用信息将是包含 DOM 节点或组件实例的数组。

关于 ref 注册时间的重要说明：

因为 ref 本身是作为渲染结果被创建的，在初始渲染的时候你不能访问它们，它们还不存在！$refs 也不是响应式的，因此你不应该用它在模板中做数据绑定。

#子组件ref
尽管存在 prop 和事件，有的时候你仍可能需要在 JavaScript 里直接访问一个子组件。访问子组件实例或子元素，通过 ref 为子组件赋予一个 ID 引用，在vue的js中可通过this.$refs.XXX来获取到组件对象。

<base-input ref="usernameInput"></base-input>
你已经定义了这个 ref 的组件里，你可以使用：this.$refs.usernameInput来访问这个<base-input>实例。

#示例：



<template>

<view>

  <input :focus="isFocus" type="text" placeholder="请输入内容" />

</view>

</template>

<script>

export default {

  name:"base-input",

  data() {

   return {

    "isFocus":false

   };

  },

  methods:{

   focus(){

    this.isFocus = true

   }

  }

}

</script>

允许父级组件通过下面的代码聚焦<base-input> 里的输入框：

<template>

<view>

  <base-input ref="usernameInput"></base-input>

  <button type="default" @click="getFocus">获取焦点</button>

</view>

</template>

<script>

export default {

  methods:{

   getFocus(){

    //通过组件定义的ref调用focus方法

    this.$refs.usernameInput.focus()

   }

  }

}

</script>

应注意的坑：

1、如果通过v-for 遍历想加不同的ref时记得加 :号，即 :ref =某变量 ;
这点和其他属性一样，如果是固定值就不需要加 :号，如果是变量记得加 :号。（加冒号的，说明后面的是一个变量或者表达式；没加冒号的后面就是对应的字符串常量（String））

2、通过 :ref =某变量添加ref（即加了:号） ,如果想获取该ref时需要加 [0]，如this.$refs[refsArrayItem] [0]；如果不是:ref =某变量的方式而是 ref =某字符串时则不需要加，如this.$refs[refsArrayItem]。

1、ref 需要在dom渲染完成后才会有，在使用的时候确保dom已经渲染完成。比如在生命周期 mounted(){} 钩子中调用，或者在 this.$nextTick(()=>{}) 中调用。

2、如果ref 是循环出来的，有多个重名，那么ref的值会是一个数组，此时要拿到单个的ref 只需要循环就可以了。

$refs的用法及作用
获取DOM元素，一般用document.querySelector获取这个dom节点，然后在获取input的值
但是用ref绑定之后，就不需要在获取dom节点了，直接在上面的input上绑定input1，然后$refs里面调用即可
this.$refs.input1 这样可以减少获取DOM节点的消耗

<div id="app">

<input type="text" ref="input1"/>

<button @click="add">添加</button>

</div>

new Vue({

    el: "#app",

    methods:{

    add:function(){

         //this.$refs.input1  减少获取dom节点的消耗

        this.$refs.input1.value ="996";

        }

    }

})