如果在普通的 DOM 元素上使用,引用指向的就是 DOM 元素;如果用在子组件上,引用就指向组件实例:
当 ref 和 v-for 一起用于元素或组件的时候,引用信息将是包含 DOM 节点或组件实例的数组。
- <!-- 非H5端不支持通过this.$refs.content来获取view实例 -->
- <view ref="content">hello</view>
- <!-- 支持通过this.$refs.child来获取child-component实例 -->
- <child-component ref="child"></child-component>
关于 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>实例。
允许父级组件通过下面的代码聚焦<base-input> 里的输入框:
- #示例:
- <!-- 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>
- <!-- index 父组件页面 -->
- <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>
应注意的坑:
这点和其他属性一样,如果是固定值就不需要加 :号,如果是变量记得加 :号。(加冒号的,说明后面的是一个变量或者表达式;没加冒号的后面就是对应的字符串常量(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";
- }
- }
- })
文章点评