ref的使用及使用场景
- 在setup中进行声明响应式的变量，一般声明基本数据类型使用，获取或者赋值的时候使用.value进行获取
let a = ref(0)
a.value ++
<p ref='p'>111</p>
let p = ref(null)
onMounted(()=>{
console.log(p.value)//此时就是当前的dom元素了
})
<script setup>
import { ref, onMounted } from 'vue'
const itemRefs = ref([])
onMounted(() => console.log(itemRefs.value))
</script>
<template>
<ul>
<li v-for="item in 10" ref="itemRefs">
{{ item }}
</li>
</ul>
</template>
<input :ref="(el) => { /* 将 el 赋值给一个数据属性或 ref 变量 */ }">
- 组件上的ref
- 注意：如果子组件中使用<script setup>这种方式，那么父组件获取不到子组件中的方法，要使用defineExpose在子组件中将当前的方法进行暴露出来，父组件才可以进行使用
- 父组件
<script setup>
import { ref, onMounted } from 'vue'
import Child from './Child.vue'
const child = ref(null)
onMounted(() => {
// child.value 是 <Child /> 组件的实例
})
</script>
<template>
<Child ref="child" />
</template>
<script setup>
import { ref } from 'vue'
const a = 1
const b = ref(2)
defineExpose({
a,
b
})
</script>
