Template Refs

在使用 Composition API 时,想要访问 template 的 dom 元素,需要在 setUp 函数里为 template 声明一个对应的 ref 对象,并从 setup()里返回。

  1. <template>
  2. <div ref="root"></div>
  3. </template>
  4. <script>
  5. import { ref, onMounted } from 'vue'
  6. export default {
  7. setup() {
  8. const root = ref(null)
  9. onMounted(() => {
  10. // 组件被创建完成后,这个Dom元素被分配给了ref。
  11. console.log(root.value) // <div/>
  12. })
  13. return {
  14. root
  15. }
  16. }
  17. }
  18. </script>