vue 中 ref 详解

一、定义与基本用法

1. 定义

在 Vue.js 中，`ref`是一个用于在组件中获取 DOM 元素或者子组件实例引用的属性。它提供了一种直接访问元素或组件的方式，使得我们可以在 JavaScript 代码中对它们进行操作。

2. 基本使用

在模板中，可以通过给元素或者组件添加`ref`属性来创建引用。

<template><div ref="myDiv">这是一个div元素</div></template>

二、在选项式 API 中的使用

1. 访问 DOM 元素

在选项式 API 中，`ref`属性可以用于获取 DOM 元素的引用。

export default {mounted() {this.$refs.input.focus();},template: '<input ref="input" type="text">',};

2. 访问子组件实例

当`ref`用于子组件时，可以获取子组件的实例，从而访问子组件的属性和方法。

// 子组件export default {methods: {getChildData() {return "子组件数据";},},};

在父组件中，可以通过`ref`获取子组件实例并调用子组件的方法

export default {mounted() {const childComponent = this.$refs.child;const childData = childComponent.getChildData();console.log(childData);},template: '<ChildComponent ref="child" />',components: {ChildComponent,},};

三、在组合式 API 中的使用

1. 创建和访问引用

在组合式 API 中，通常使用`ref`函数（从`vue`模块中导入）来创建引用。

import { ref, onMounted } from "vue";export default {setup() {const myDiv = ref(null);onMounted(() => {console.log(myDiv.value);});return {myDiv,};},template: '<div ref="myDiv">这是一个div元素</div>',};

2. 与响应式数据的结合使用

`ref`创建的引用可以与其他响应式数据一起使用，用于构建复杂的交互逻辑。

import { ref, watch } from "vue";export default {setup() {const buttonRef = ref(null);const clickCount = ref(0);watch(() => buttonRef.value,() => {if (buttonRef.value) {clickCount.value++;}});return {buttonRef,clickCount,};},template:'<button ref="buttonRef" @click="clickCount++">点击我</button> <p>点击次数: {clickCount}</p>',};