一、什么是 ref？
在 Uniapp（基于 Vue.js）开发中，`ref` 是一个用于注册引用信息的特殊属性。它允许开发者直接访问 DOM 元素或子组件实例，从而可以直接操作它们而不需要通过 props 或事件来间接通信。
二、ref 的基本用法
1. 在模板中使用 ref
html
<script>
export default {
methods: {
handleClick() {
// this.$refs.myInput指向input元素
console.log(this.$refs.myInput)
// this.$refs.myChild指向child-component实例
console.log(this.$refs.myChild)
// DOM操作示例：聚焦输入框
this.$refs.myInput.focus()
//调用子组件方法示例：
this.$refs.myChild.someMethod()
}
}
</script>
2.在组合式API中使用(ref)
html
<script setup>
import { ref, onMounted } from 'vue'
//声明一个同名的响应式变量来接收模板引用
const myInput = ref(null)
const myChild = ref(null)
onMounted(() =>{
//DOM挂载后可以访问引用了console.log(myInput.value)console.log(myChild.value)
})
function handleClick(){
myInput.value.focus()
myChild.value.someMethod()
}
</script>
@input=""
placeholder=""
/>
文章点评