vue3中ref的使用场景

ref的使用及使用场景

• 在setup中进行声明响应式的变量，一般声明基本数据类型使用，获取或者赋值的时候使用.value进行获取

 let a = ref(0)
 a.value ++

• 使用ref获取当前元素的dom

 <p ref='p'>111</p>

let p = ref(null)
onMounted(()=>{
  console.log(p.value)//此时就是当前的dom元素了
})

• 在v-for中使用，会是一个数组

<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>

• ref也可以在标签上写成函数使用

<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>

• 子组件使用defineExpose暴露方法

<script setup>
import { ref } from 'vue'

const a = 1
const b = ref(2)

defineExpose({
  a,
  b
})
</script>