vue3使用$refs

在Vue3中，$refs已经被弃用了，取而代之的是使用ref和teleport。

1. ref

ref是Vue3中用来获取组件或DOM元素引用的方法，类似于Vue2中的$refs。ref可以在组件中使用，也可以在普通的DOM元素上使用。

在组件中使用ref：

<template>
  <div ref="myDiv">Hello, World!</div>
</template>

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

export default {
  setup() {
    const myDiv = ref(null)

    onMounted(() => {
      console.log(myDiv.value) // 输出DOM元素
    })

    return {
      myDiv
    }
  }
}
</script>

在普通的DOM元素上使用ref：

<template>
  <div>
    <button ref="myButton" @click="handleClick">Click me</button>
  </div>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const myButton = ref(null)

    const handleClick = () => {
      myButton.value.disabled = true
    }

    return {
      myButton,
      handleClick
    }
  }
}
</script>

2. teleport

teleport是Vue3中用来将组件渲染到指定位置的方法。teleport可以在组件中使用，也可以在普通的DOM元素上使用。

在组件中使用teleport：

<template>
  <teleport to="body">
    <div>Hello, World!</div>
  </teleport>
</template>

在普通的DOM元素上使用teleport：

<template>
  <div>
    <teleport to="#my-modal">
      <Modal />
    </teleport>
  </div>
</template>