在使用 Composition API 时,想要访问 template 的 dom 元素,需要在 setUp 函数里为 template 声明一个对应的 ref 对象,并从 setup()里返回。
<template>
<div ref="root"></div>
</template>
<script>
import { ref, onMounted } from 'vue'
export default {
setup() {
const root = ref(null)
onMounted(() => {
// 组件被创建完成后,这个Dom元素被分配给了ref。
console.log(root.value) // <div/>
})
return {
root
}
}
}
</script>
下一节:前面的所有示例我们都用了createComponent来创建组件,是时候来真正揭开它的真面目了。没错,它的作用是用来让我们使用 Typescript 来编写代码的,这样我们的代码就拥有了类型推导。