vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > Vue 和 React 使用ref

Vue 和 React 使用ref的示例详解

作者：lryh_

在 Vue 中,ref 是一个响应式对象,修改 ref 的值会触发组件的重新渲染,因为 Vue 的 ref 是基于其响应式系统实现的,任何对 ref 的修改都会被 Vue 检测到,并触发组件的更新,本文给大家介绍Vue 和 React 使用ref的示例,感兴趣的朋友一起看看吧

ref 用于访问 DOM 元素或子组件实例

Vue2:

<template>
  <div>
    <input ref="inp" />
  </div>
</template>
<script>
export default {
  mounted() {
    this.$refs.inp.focus()
  }
}
</script>

Vue3 组合式API中使用ref 

<template>
  <div>
    <input ref="inp" />
  </div>
</template>
<script>
import { ref, onMounted } from 'vue';
export default {
  setup() {
    const inp = ref(null)
    onMounted(() => {
      inp.value.focus()
    })
    return {
      inp
    }
  }
}
</script>

        在 Vue 中，ref 是一个响应式对象，修改 ref 的值会触发组件的重新渲染。因为 Vue 的 ref 是基于其响应式系统实现的，任何对 ref 的修改都会被 Vue 检测到，并触发组件的更新。

React 函数组件通过useRef Hook 来实现：

useRef 不仅可以用于访问 DOM 元素，还可以存储任何可变值

import { useEffect, useRef } from "react"
const Hanshi = () => {
    const inp = useRef(null)
    useEffect(()=>{
        inp.current.focus()
    },[])
    return <>
        <div>
            <h3>函数组件</h3>
            <input type="text" ref={inp}/>
        </div>
    </>
 }
 export default Hanshi

useRef(null) 创建了一个 ref 对象，并将其初始值设置为 null

将 inp 绑定到 <input> 的 ref 属性上，这样 inp.current 就会指向该 DOM 元素

在 useEffect 中，通过 inp.current 访问 DOM 元素并调用 focus() 方法

存储任何可变值：与 useState 不同，修改 useRef 的值不会触发组件的重新渲染

import { useEffect, useRef } from "react"
const Hanshi = () => {
    const inp = useRef()
    const num = useRef(0)
    useEffect(()=>{
        inp.current.focus()
        num.current += 1
        console.log(`组件渲染了 ${num.current} 次`)
    },[])
    return <>
        <div>
            <h3>函数组件</h3>
            <input type="text" ref={inp}/>
        </div>
    </>
 }
 export default Hanshi

函数组件中转发 ref(forwardRef）: forwardRef 允许父组件访问子组件中的 DOM 元素或组件实例

使用 forwardRef 将 ref 从父组件传递到子组件

父组件通过 inpt 访问子组件中的 <input> 元素

useImperativeHandle 自定义子组件暴露给父组件的 ref 值

useImperativeHandle 允许子组件自定义暴露给父组件的 ref 值

父组件可以通过 inpt.current 调用子组件暴露的方法（如 focus 和 getValue）

React 类组件 createRef

1. 通过createRef创建一个ref对象
2. 给元素绑定ref属性值  为创建的ref对象
3. 通过ref对象的current获取元素，再获取它的值

import { Component,createRef } from "react";
export default class Detail extends Component{
    inp = createRef()
    getInp(){
     console.log(this.inp.current.value)
    }
    componentDidMount(){
        this.inp.current.focus()
    }
    render() {
        return <div>
            <h3>类组件</h3>
            <input type="text" ref={this.inp}/>
            <button onClick={this.getInp.bind(this)}>获取值按钮</button>
        </div>
    }
}

类子组件

父组件通过 ref 访问子组件的实例，并调用子组件的方法（如 focus）

这种方式仅适用于类组件，函数组件没有实例

函数式子组件 forwardRef

到此这篇关于Vue 和 React 使用ref的文章就介绍到这了,更多相关Vue 和 React 使用ref内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:
阅读全文