一文详解Vue3中使用ref获取元素节点

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

// 声明一个ref引用，来保存元素
const domRef = ref(null)

onMounted(() => {
  domRef.value.style.background = "red"
})
</script>

<template>
  <!-- 这里只需要同名即可 -->
  <button ref="domRef">dom</button>
</template>

onMounted(() => {
  domRef.value.style.background = "red"
})

nextTick(() => {
  domRef.value.style.background = "red"
})

watchEffect(() => {
   if (domRef.value) {
        domRef.value.style.background = "red"
   }
})

watch(domRef, (val) => {
    domRef.value.style.background = "red"
})

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

const list = ref([
  /* ... */
])

const itemRefs = ref([])

onMounted(() => console.log(itemRefs.value))
</script>

<template>
  <ul>
    <li v-for="item in list" ref="itemRefs">
      {{ item }}
    </li>
  </ul>
</template>

<template>
    <button :ref="handleRef">动态Ref</button>
</template>
<script setup>
    import { shallowRef } from 'vue'
    
    const btnRef = shallowRef(null)
    // 赋值动态ref到变量
    const handleRef = el => {
        if (el) {
            btnRef.value = el
        }
    }
</script>

<template>
    <ul>
        <li v-for="item in list" :key="item.id" :ref="(el) => handleLiRef(el, item)">
            <button>{{ item.id }}</button>
        </li>
    </ul>
</template>

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

    const list = ref([{ id: "111" }, { id: "222" }, { id: "333" }])

    const handleLiRef = (el, item) => {
        console.log(el, item)
    }
</script>

<template>
    <ul>
        <li v-for="item in list" :key="item.id" :ref="item.id">
            <button>{{ item.id }}</button>
        </li>
    </ul>
</template>
<script setup>
    import { getCurrentInstance, onMounted, ref } from "vue"

    const { proxy } = getCurrentInstance()

    const list = ref([{ id: "111" }, { id: "222" }, { id: "333" }])
    onMounted(() => {
        console.log(proxy.$refs["111"])
    })
</script>

<template>
    <Test ref="childRef"></Test>
</template>

<script setup lang="ts">
    import Test from "./components/test.vue"
    import { onMounted, ref } from "vue"

    const childRef = ref(null)
    onMounted(() => {
        console.log(childRef.value.btnRef)
    })
</script>

<template>
    <button ref="btnRef">子组件</button>
</template>

<script setup>
    import { ref } from "vue"
    const btnRef = ref(null)
    defineExpose({
        btnRef
    })
</script>