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>',
};